如何使用 Javascript 和 JSON 显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9597624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display images using Javascript and JSON
提问by krishna bhargavi
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:
我必须向浏览器显示图像，我想从 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\/"
}]
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);
}
回答by Sirko
Assuming you parsed your json in a variable called json, this would add all images in a container with id yourcontainer:
假设您在名为 的变量中解析了 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;
回答by Ohgodwhy
Seems pretty straight forward. If this is json_encoded, then we can use json[key] to get the value, if you aren't familiar with the term 'key', json encodes arrays in the key:value, format, so for this, if we used json[member_id], we would get '101', if we used json[image_nm], we would get '3k.png', putting this all together it seems as if it's pretty well separated, you just have to know what goes where. I have an idea, but not 100%,I would expect you to do something like
看起来很直接。如果这是 json_encoded，那么我们可以使用 json[key] 来获取值，如果您不熟悉术语 'key'，json 以 key:value, 格式对数组进行编码，因此为此，如果我们使用 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;
Based on your json data, this would evaluate a variable and test it against the length of the json array. The statement also declares that while the variable is less than the total length of the json array, we will iterate to the next object. We would expect output along the format of -
根据您的 json 数据，这将评估一个变量并根据 json 数组的长度对其进行测试。该语句还声明，当变量小于 json 数组的总长度时，我们将迭代到下一个对象。我们希望输出格式为 -
<img src="/images/3k.png" />.
Then it would take the new images and place them in a Div with the id of myImgHolder.
然后它将获取新图像并将它们放置在具有 myImgHolder id 的 Div 中。
Hope this helps.
希望这可以帮助。
EDIT 1
编辑 1
If you don't have a container to place these images inside of it, then you will need to create the container and place it somewhere.
如果您没有将这些图像放置在其中的容器，那么您将需要创建容器并将其放置在某处。
var myImgHolder = document.createElement('div');
myImgHolder.setAttribute("id", "myImgHolder");
document.getElementById('ICanTargetThis').appendChild(myImgHolder);
The above code sets the variable myImgHolder to the creation of a new DIV element. Then, using the variable, we declare the attribute "id" to set as 'myImgHolder'. Now we have the element. But what do we do with it? Well we MUST target an existing element within our page, even if we're just targeting the tag...something. then we use the .appendChild method and use our variable...appendChild(myImgHolder);
上面的代码将变量 myImgHolder 设置为创建新的 DIV 元素。然后，使用该变量，我们将属性“id”声明为“myImgHolder”。现在我们有了元素。但是我们用它做什么呢？好吧，我们必须以页面中的现有元素为目标，即使我们只是以标签为目标……某些东西。然后我们使用 .appendChild 方法并使用我们的变量...appendChild(myImgHolder);
回答by Ishan Patel
You can use jQuery here.
你可以在这里使用 jQuery。
Add following script in the head tag.
在 head 标签中添加以下脚本。
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<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>
