Question

当我们按下单选按钮时，我正在显示信息。除此以外，我还想显示一个图像，所以我做了以下操作，但是文本看起来不错，但是没有显示图像。我该怎么办？

图像将如下所示：

我的项目路径

html

<form name="image_type">
    <input type="radio" name="check_img" value="눈" onclick="eyesinfo()" /><span>눈</span
</form>
<p class="disease-information"></p>

<script>
    function eyesinfo(){
        var info = "sometext<br><img src='images\earsexample.jpg'>";
        $('.disease-information').html(info);

}
</script>

Answer 1

请使用以下代码，它将对您有用。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<form name="image_type">
    <input type="radio" name="check_img" value="눈" onclick="eyesinfo()" /><span>눈</span>
</form>
<p class="disease-information"></p>

<script>
    function eyesinfo(){
        var info = "sometext<br><img src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png'>";
        $('.disease-information').html(info);

}
</script>

</body>
</html>

Answer 2

确保为img属性添加真实的图像路径。

var info = "sometext<br><img src='https://freeiconshop.com/wp-content/uploads/edd/eye-outline.png'>";
$('.disease-information').html(info);

Answer 3

请按以下步骤更改脚本：

<script>
  function eyesinfo(){
    let img = document.createElement("img");
    $(img).attr("src","https://petokala.com/images/logo.png");
    $(".disease-information").html('');
    $(img).appendTo($('.disease-information'));
  }
</script>

单击按钮时出现Javscaript使图像出现

3 个答案: