如何根據用戶性別顯示兩個不同的 image.png？

Question

我有一個小問題，我想根據用戶性別顯示兩個不同的圖像（maleuser.png、femaleuser.png）。 我創建了 HTML 頁面，MySQL 表。 oneuserpage.html 顯示來自基礎的數據，我為頁面的圖像制作了 position。

現在如何使用 JavaScript 的圖片創建文本依賴項（男性，女性）？

Answer 1

如果你有變量 img（ HTMLImageElement — 你的圖片）和性別（如果性別等於“男性”或“女性”）： img.src = gender + "user.png"; . 另一種性別格式：

 img.src = (gender == yourMaleSyntax)? "maleuser.png": "femaleuser.png";

我推薦第一種語法。 請嘗試並盡可能檢查我的答案。

Answer 2

首先，我們必須使用以下代碼從數據庫表中獲取行數：后期說您的頁面是 try.php

<?php
include 'connection.php';
$qry = 'SELECT * FROM tbl_user';
$result = mysqli_query($con,$qry);
?>

在同一個 php 頁面（try.php）中，在上面的代碼下面，我們必須創建 html 表，該表將包含我們從執行上述查詢中獲得的所有數據/行

<table border="1">
    <tr>
      <th> Username </th>
      <th> email </th>
      <th> phone</th>
      <th> gender photo</th>
    </tr>
<?php
if($result){    
    while($row = mysqli_fetch_array($result)){
        $fetchuser = $row['uname'];
        $fetchmail = $row['uemail'];
        $fetchpass = $row['upassword'];
        $fetchgender = $row['ugender'];

?>  
<tr>
    <tr> 
        <td><?php echo $fetchuser;?></td>
        <td><?php echo $fetchmail;?></td>
        <td><?php echo $fetchpass;?></td>
        <td>
        <script type="text/javascript">
        var gender = "<?php echo $fetchgender;?>";
        if(gender==0){
            document.write('<img src="maleuser.png" alt="Male"/>');
        }else{
            document.write('<img src="maleuser.png" alt="Female"/>');
        }
        </script>
        </td>

    </tr>   
<?php
   }
 }

else{

}
?>
</table>

我嘗過，效果很好。 希望它對您和其他人也有幫助。 謝謝你。