javascript - 在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>要渲染的元素，包括 <img>与 src设置为json.Hatch[0].image在传递给 .html() 的字符串内

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