gitsilence 的个人博客

以为是 img 标签导致的跨域，但是之前有没碰到过，奇葩。

然后就看到了这段代码：

// 判断是否损坏并且赋值
    checkDamage(path) {
      var xhr = new XMLHttpRequest() // 创建XHR对象
      xhr.open("GET", path) // 设置请求类型和URL地址
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status !== 200) {
          // readyState为4时表示请求已完成且服务器响应就绪
          this.isFailFun() // 文件损坏
        }
      }
      xhr.send() // 发送请求
      this.mediaUrl = path
      // 音频
      if (
        this.$refs?.audio &&
        this.audio.includes(this.item?.eventFileVOS?.[0]?.mediaType)
      ) {
        this.$refs.audio.src = path
      }
      // 视频
      if (
        this.$refs?.video &&
        this.video.includes(this.item?.eventFileVOS?.[0]?.mediaType)
      ) {
        this.$refs.video.src = path
      }
    }

这里发生了跨域，然后 Img 标签上的图片就被图片已损坏图片覆盖了。

解决此问题 nginx 配置文件需加上：

location /xx {
    root   /home/xxx;
    add_header  'Access-Controler-Allow-Origin' *;
}

再渲染 Img 标签的图片之前，会先检查图片是否损坏，如果损坏就用默认的图片覆盖，否则就用原图片的地址。

在网上找到了一个优雅的解决方式

<img src="图片的url地址" alt="图片描述" onerror="this.src='默认图片的url地址'"/>

这里是应用了img标签的 onerror事件，当加载失败就用默认图片地址。但是这里可能出现如果默认图片地址也加载不出来，或者失败，在IE内核的浏览器下就会反复加载，出现死循环，最后造成堆栈溢出错误。因此， 需要用下面两种方法解决：

1. 更改 onerror 代码为其它处理方式或者确保 onerror 中的默认图片足够小，并且存在。
2. 控制 onerror 事件只触发一次，需要增加这句话：this.onerror=null; 增加后如下：

<img src="图片的url地址" alt="图片描述" onerror="this.src='默认图片的url地址';this.onerror=null"/>

视频、音频就没必要了。