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

问题描述

我是JQuery的新手，我们将不胜感激.

I'm new to JQuery and any help would be much appreciated.

使用$ .getJSON函数，在提供的items.json文件中检索数据，并在下面的画廊中显示图像.画廊应以3列网格的粗略缩略图显示每个图像，并在其下方显示标题.以桌面分辨率."

"Using $.getJSON function, retrieve the data in the items.json file provided and display the images in a gallery below. The gallery should display each image at roughly thumbnail size with its caption below it in a 3-column grid at desktop resolution."

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

I was able to get the the .json to output on the HTML page, now I was wondering how to get the actual images to show on the HTML page instead of the URL path of the images? This is what outputs to the HTML page currently:

• URL:images/image_1.jpg

• 标题:图片1标题

• URL: images/image_1.jpg

• caption: Image 1 Caption

URL:images/image_2.jpg

URL: images/image_2.jpg

标题:图片2标题

URL:images/image_3.jpg

URL: images/image_3.jpg

标题:图片3标题

URL:images/image_4.jpg

URL: images/image_4.jpg

items.json

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

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

        });
    });
});

推荐答案

尝试一下:

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

    });
});

这篇关于从JSON文件检索数据并在图库中显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！