如何在网页中查看JSON文件存储的图片链接对应的图片？

嘿，这个需求很常见，用前端的HTML+JavaScript就能轻松搞定，我给你一步步拆解，附带可直接运行的代码示例：

1. 先确认你的JSON结构 #

首先得明确你的JSON文件格式，比如假设你的JSON文件（命名为images.json）内容是类似这样的：

{
  "imageList": [
    "https://picsum.photos/200/300?random=1",
    "https://picsum.photos/200/300?random=2",
    "https://picsum.photos/200/300?random=3"
  ]
}

核心就是要有一个包含所有图片链接的数组，方便我们后续遍历。

2. 编写完整的网页代码 #

你可以直接把下面的代码保存为index.html，和你的JSON文件放在同一个文件夹里，用浏览器打开就能看到图片了：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>展示JSON中的图片</title>
    <style>
        .image-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .image-item {
            width: 200px;
            height: 300px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }
        .image-item:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">JSON图片列表展示</h1>
    <div class="image-container" id="imageContainer"></div>

    <script>
        // 读取本地JSON文件
        fetch('images.json')
            .then(response => {
                if (!response.ok) {
                    throw new Error('JSON文件加载失败，请检查路径是否正确');
                }
                return response.json();
            })
            .then(data => {
                const container = document.getElementById('imageContainer');
                // 遍历所有图片链接，生成图片元素
                data.imageList.forEach((imageUrl, index) => {
                    const img = document.createElement('img');
                    img.src = imageUrl;
                    img.className = 'image-item';
                    img.alt = `展示图片${index + 1}`;
                    // 处理图片加载失败的情况
                    img.onerror = () => {
                        img.src = 'https://picsum.photos/200/300?random=0';
                        img.alt = '图片加载失败';
                    };
                    container.appendChild(img);
                });
            })
            .catch(error => {
                console.error('出错了:', error);
                alert('加载图片列表失败，请检查JSON文件路径或格式！');
            });
    </script>
</body>
</html>

3. 关键逻辑解释 #

• fetch函数：浏览器原生的网络请求API，用来读取JSON文件的内容，不用额外引入任何库。
• JSON解析：通过response.json()把获取到的文本转换成JavaScript对象，这样我们就能轻松遍历里面的图片链接数组。
• 动态生成图片元素：遍历每个图片链接，创建<img>标签并设置src属性，最后把标签添加到页面的容器中，实现图片展示。
• 异常处理：添加了JSON加载失败、图片加载失败的处理逻辑，避免页面出现异常空白。

额外注意事项 #

• 如果你的JSON文件在远程服务器上，直接把fetch('images.json')里的路径替换成远程JSON的URL即可，但要注意跨域问题：如果远程服务器没有开启CORS（跨域资源共享），浏览器会阻止请求，这时候需要后端配合设置跨域响应头，或者使用代理服务器。
• 你可以根据自己的需求修改CSS样式，比如调整图片大小、布局方式、 hover效果等。

内容的提问来源于stack exchange，提问作者Adnan Azmat