显示 html 中 json 数据的图像？

Question

我试图在 HTML 中显示来自我的 JSON 数据的图像，但我没有任何成功。

我有一个标记，它在 onclick 事件发生时显示一些内容。

为此，我使用以下 JSON 代码：

var json = {
"Hatch": [
    {
        "image": "img/myimage.jpg",
        "description": "test goes here"
    }
]
}

 $(document).ready(function(){
for( index in json.Hatch )



$('.marker.one').on('click', function(){
$('#show').html(   'Image : ' +json.Hatch[index].image + '| Description : ' + json.Hatch[index].description  );

});
});

我的 html 点击触发如下：

<section class="info">

    <div class="container-fluid">
      <div class="row">

      <div class="marker one">

         <img  class="trigger" src="img/marker.png">

      </div>

      <div class="marker two">
         <img  class="trigger" src="img/tooltip.png">

      </div>


      </div>
</section>

此处显示：

<div id="show"></div>

如果您能提供任何帮助，那将是非常棒的！我开始只使用 JSON。

感谢您的宝贵时间！

Answer 1

for..in 循环不是必需的。如果您希望呈现 <img> 元素，请在传递给 .html()

的字符串中包含 <img> 并将 src 设置为 json.Hatch[0].image

$(".marker.one").on("click", function() {
  if (!$("#show img").is("*"))
    $("#show").html(
      "Image : <img src=" + json.Hatch[0].image + ">"
    + "| Description : " + json.Hatch[0].description
    );
});

显示 html 中 json 数据的图像？

Display image from json data in html?

javascript

json

image

toggle