如何使用Javascript和JSON显示图像 [英] How to display images using Javascript and JSON

问题描述

我必须在浏览器中显示图像，我想从JSON响应中获取图像，然后使用Javascript将其显示在浏览器中. JSON响应如下所示:

I have to display images to the browser and I want to get the image from a JSON response and display it to the browser using Javascript. This is what the JSON response looks like:

[{
    "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\/"
}]

我该怎么做(我是初学者)?

How do I do this (I am a beginner)?

这是我写的代码...

here is the code what i wrote...

       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);
         }

推荐答案

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

Assuming you parsed your json in a variable called json, this would add all images in a container with 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;

这篇关于如何使用Javascript和JSON显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！