Angular 7项目中HTML页面无法显示API返回图片的问题求助

• 验证API返回内容有效性
  • 先将API返回的图片链接单独放入浏览器地址栏访问，确认资源本身可正常加载，排除地址无效、签名过期、资源下架等问题
  • 若API返回的是Base64格式的图片内容，检查是否遗漏了资源类型前缀，例如data:image/jpeg;base64,，前缀缺失会导致浏览器无法识别内容格式
• 排查跨域访问限制
  • 打开浏览器控制台「网络」面板，查看图片请求是否存在CORS报错，同源策略会拦截未配置跨域规则的资源请求
  • 解决方案：联系资源提供方配置对应域名的跨域白名单，或者由你的后端接口代理转存图片资源后返回给前端
• 检查代码书写错误
  • 确认img标签属性拼写正确，避免把src错写为scr这类低级笔误
  • 动态赋值src时，需确保是在API请求成功的回调逻辑内执行，且图片地址变量没有空值、undefined的异常，参考正确写法：

  // 原生JS动态赋值示例
  fetch('你的API请求地址')
    .then(response => response.json())
    .then(result => {
      const targetImg = document.getElementById('showImg')
      // 赋值前可打印校验地址有效性
      console.log(result.imgUrl)
      targetImg.src = result.imgUrl
    })
  

• 处理二进制图片流场景
  • 如果API返回的是二进制图片流，不要直接解析为字符串，需要先转为Blob对象再生成可访问的临时链接，示例写法：

  fetch('返回图片流的API地址')
    .then(response => response.blob())
    .then(blobData => {
      const targetImg = document.getElementById('showImg')
      targetImg.src = URL.createObjectURL(blobData)
    })
  

• 规避防盗链拦截
  • 部分图片服务配置了防盗链规则，非白名单域名引用会返回403错误，可在HTML头部添加如下配置规避部分限制：

  <meta name="referrer" content="no-referrer">
  

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