如何使用原生JavaScript从API获取并展示图片？

代码存在3处直接导致图片加载失败的逻辑错误：

• 属性赋值类型不匹配：photo.src属性要求传入纯图片资源URL字符串，你却将拼接好的整段<img>HTML代码赋值给了该属性，浏览器无法识别非URL格式的资源路径。
• 元素属性使用错误：如果#photo是<img>类型的DOM元素，它属于自闭合标签，不存在可承载内容的子节点，给它的innerHTML属性赋值图片URL，会直接把原图片元素替换成纯文本形式的URL字符串，无法渲染图片。
• 逻辑冗余冲突：手动拼接完整<img>标签的实现，和你提前获取的已存在于页面的#photoDOM元素完全重复，属于无效实现。

• 确保页面中#photo为独立的空<img>标签，参考结构：<img id="photo" alt="用户头像">
• 删除错误的冗余代码：
  • 移除两行重复声明的output变量及对应的标签拼接逻辑
  • 移除photo.innerHTML = response.results[0].picture.large;的赋值代码
• 直接将接口返回的图片URL赋值给photo.src属性即可完成渲染。

xml.onload = function () {
  if (this.status === 200) {
    const response = JSON.parse(this.response);
    // 直接为img元素的src属性赋值接口返回的图片地址
    photo.src = response.results[0].picture.large;
    firstName.innerHTML = response.results[0].name.first;
    lastName.innerHTML = response.results[0].name.last;
    street.innerHTML = response.results[0].location.street.name;
    phone.innerHTML = response.results[0].phone;
    email.innerHTML = response.results[0].email;
  }
};

• 可以先通过console.log打印response.results[0].picture.large，确认拿到的是完整的图片字符串地址，避免因字段取值为undefined导致的加载失败。
• 不要对自闭合的<img>元素设置innerHTML属性，该元素不存在可解析的内部内容节点。

内容的提问来源于stack exchange，提问作者Andrés Ramírez