如何将Pexels网页图片添加到JSON文件并正确渲染显示，而非输出图片页面URL

API 探路者

2026-10-9

问题根因

你JSON文件中存储的是Pexels图片的详情网页链接，不是可以直接渲染的图片资源直链，浏览器无法将网页内容识别为图片加载
JS渲染逻辑中没有使用<img>标签承载图片资源，只是把链接当纯文本输出到页面

解决步骤

替换JSON中的链接为图片直链
打开你存的Pexels详情页，右键点击页面内的主图，选择「复制图片地址」，替换掉JSON里原来的详情页链接。修改后的JSON参考格式如下：

[
  {
    "title":"Title1",
    "image": "替换为你复制的图片直链，格式通常为https://images.pexels.com/photos/xxx/xxx.jpeg这类"
  }
]

修改JS渲染代码，使用img标签加载图片
调整模板字符串部分，把图片链接放到img标签的src属性中，修改后的代码如下：

function getdata() {
  fetch('data.json')
   .then(res => res.json())
    .then(data => {
      let out = ''
      data.forEach(function(item){
        out += `
         <div><img src="${item.image}" alt="${item.title}" style="max-width: 600px;"></div>
         <div>${item.title}</div>
        `
      })
      document.querySelector('.output').innerHTML = out
    })
    .catch(function(err){
      console.log(err)
    })
}
getdata()

代码里加了style="max-width: 600px;"是为了避免图片太大撑破页面，你可以根据需求调整尺寸。