如何根据用户性别显示两个不同的 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>

我尝过，效果很好。 希望它对您和其他人也有帮助。 谢谢你。