Question

我必须向浏览器显示图像，我想从JSON响应中获取图像并使用Javascript将其显示到浏览器。这就是JSON响应的样子：

[{
    "0":"101",
    "member_id":"101",
    "1":"3k.png",
    "image_nm":"3k.png",
    "2":"\/images\/phones\/",
    "image_path":"\/images\/"
},{
    "0":"102",
    "member_id":"102",
    "1":"mirchi.png",
    "image_nm":"mirchi.png",
    "2":"images\/phones\/",
    "image_path":"images\/phones\/"
},{
    "0":"103",
    "member_id":"103",
    "1":"masti.png",
    "image_nm":"masti.png",
    "2":"images\/phones\/",
    "image_path":"images\/phones\/"
}]

我该怎么做（我是初学者）？

这是我写的代码......

       var jsonString =   '[{"0":"101","member_id":"101","1":"3k.png","image_nm":"3k.png","2":"\/images\/phones\/","image_path":"\/images\/phones\/"},{"0":"102","member_id":"102","1":"mirchi.png","image_nm":"mirchi.png","2":"images\/phones\/","image_path":"images\/phones\/"},{"0":"103","member_id":"103","1":"masti.png","image_nm":"masti.png","2":"images\/phones\/","image_path":"images\/phones\/"}]';
       var obj = JSON.parse(jsonString);

       for(var i = 0, len = obj.length; i < len; i++){
       var img = new Image();
       img.setAttribute("src",obj[i][2] + obj[i][1]);
       document.body.appendChild(img);
         }

Answer 1

假设您在名为json的变量中解析了json，这会将所有图像添加到ID为yourcontainer的容器中：

var images = '';
for( var i=0, max<json.length; ++i ) {
  images += '<img src="' + json[i]['image_path'] + json[i]['image_nm'] + '" />';
}

document.getElementById( 'yourcontainer' ).innerHTML = images;

Answer 2

似乎非常直截了当。如果这是json_encoded，那么我们可以使用json [key]来获取值，如果你不熟悉术语'key'，json在key：value，format中编码数组，所以对于这个，如果我们使用了json [member_id]，我们会得到'101'，如果我们使用json [image_nm]，我们会得到'3k.png'，把它们放在一起看起来好像它分离得很好，你只需要知道它在哪里。我有一个想法，但不是100％，我希望你做点像

var myImages = '';
for(var i = 0; i < json.length; i++){
  myImages += '<img src="'+json[i]['image_path']+json[i]['img_nm']+'" />';
}
document.getElementById('myImgHolder').innerHTML = myImages;

根据您的json数据，这将评估一个变量并根据json数组的长度对其进行测试。该语句还声明，虽然变量小于json数组的总长度，但我们将迭代到下一个对象。我们希望输出格式为 -

<img src="/images/3k.png" />.

然后它将拍摄新图像并将它们放在ID为myImgHolder的Div中。

希望这有帮助。

编辑1

如果您没有容器将这些图像放在其中，那么您需要创建容器并将其放置在某处。

var myImgHolder = document.createElement('div');
myImgHolder.setAttribute("id", "myImgHolder");
document.getElementById('ICanTargetThis').appendChild(myImgHolder);

上面的代码将变量myImgHolder设置为创建新的DIV元素。然后，使用变量，我们声明属性“id”设置为'myImgHolder'。现在我们有了元素。但是我们用它做什么呢？好吧，我们必须在我们的页面中定位一个现有的元素，即使我们只是针对标记...某事。然后我们使用.appendChild方法并使用我们的变量... appendChild（myImgHolder）;

Answer 3

你可以在这里使用jQuery。

在head标记中添加以下脚本。

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<script>
$(document).ready(function () {
var url = "entries.json";
$.getJSON(url, function (url){
 var img= "";
$.each(url, function () {
 img += '<li><img src= "' + this.images+ '"></li>';
});
$('body').append(img);
});
});
</script>

如何使用Javascript和JSON显示图像

3 个答案: