从 JSON 文件中检索数据并在图库中显示图像答案

【问题标题】：Retrieve data from JSON file and display images in a gallery从 JSON 文件中检索数据并在图库中显示图像
【发布时间】：2014-10-02 15:45:02
【问题描述】：

我是 JQuery 的新手，任何帮助都将不胜感激。

“使用 $.getJSON 函数，检索提供的 items.json 文件中的数据并在下面的图库中显示图像。图库应以大致缩略图大小显示每个图像，其标题在 3 列网格中以桌面分辨率。”

我能够让 .json 输出到 HTML 页面上，现在我想知道如何让实际图像显示在 HTML 页面上，而不是图像的 URL 路径？这是当前输出到 HTML 页面的内容：

网址：images/image_1.jpg
标题：图片 1 标题
网址：images/image_2.jpg
标题：图片 2 标题
网址：images/image_3.jpg
标题：图片 3 标题
网址：images/image_4.jpg
标题：图片 4 标题

items.json

{
"items": [
    {
        "url": "images/image_1.jpg",
        "caption": "Image 1 Caption"
    },
    {
        "url": "images/image_2.jpg.jpg",
        "caption": "Image 2 Caption"
    },
    {
        "url": "images/image_3.jpg.jpg",
        "caption": "Image 3 Caption"
    },
    {
        "url": "images/image_4.jpg.jpg",
        "caption": "Image 4 Caption"
    }
]

}

scripts.js

  $(document).ready( function(){
    $.getJSON('images.json', function(data) {
        $.each(data.items, function(i,f) {
            $("ul").append("<li>URL: "+f.url+"</li><li>Caption: "+f.caption+"</li><br />");

        });
    });
});

【问题讨论】：

控制台有错误吗？
不要编辑问题。清楚地说出你的问题..
控制台没有错误，我得到一个输出。我希望图像显示为输出而不是实际的 URL。谢谢。
如果
标签 -

$.getJSON('js/ads.json', function (data) { $.each(data.items, function (i, f) { $("ul").append("<li>URL: " + f.url + "</li><li><img src="+f.url+" id=\"image\"/></li><br />"); }); });

$(document).ready(function() { $.getJSON('items.json', function(data) { $.each(data.items, function(i, f) { $("#images").append("<img src=" + f.url + " >"); }); }); });