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

Question

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

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

我能够在 HTML 页面上输出 .json，现在我想知道如何让实际图像显示在 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 />");

        });
    });
});

Answer 1

试试这个:

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

    });
});