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 />");

    });
});

Answer 2

只是显示img;

的更新

$.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 />");

            });
        });

Answer 3

如果你想只显示img使用此功能（我将div与id="images"一起使用）

 $(document).ready(function() {

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

                });
            });
        });

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

3 个答案: