Pexels模拟站开发中JavaScript动态创建图片无法加载问题

问题根因及解决方案 #

• 核心错误：字段取值错误
  Pexels 公开API返回的photos数组中，photo.url是单张图片的详情网页链接，并非可直接用于<img>标签加载的图片资源地址。你需要提取photo.src下对应规格的资源地址，常见可选字段包括original/large/medium/small等，根据你的展示需求选择即可。
• 次要潜在问题：属性未加引号防护
  你在动态拼接innerHTML时，src属性没有包裹引号，若URL中存在特殊字符（如空格、特殊查询参数）会导致浏览器解析属性出错，需要给属性值添加双引号包裹。

修正后代码 #

let response = JSON.parse(request.responseText);
// 修正：取photo.src下的对应规格资源地址，这里以medium为例
let photoURL = response.photos.map(function (photo) {
  return photo.src.medium;
});

console.log(photoURL);

const imagesContainer = document.querySelector('.images-container');
imagesContainer.innerHTML = ``;
photoURL.forEach(photo => {
  const imageDiv = document.createElement('div');
  imageDiv.classList.add('image-div');
  // 修正：给src属性值包裹双引号，避免特殊字符解析异常
  imageDiv.innerHTML = `
    <img class="created-image" src="${photo}">
  `;
  imagesContainer.appendChild(imageDiv);
});

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