ssr 同构框架如何捕获图片加载失败事件

有这样的一个需求，当页面上某张图片加载失败的时候，展示默认背景图。

一般 spa 页面会这么写，采用事件绑定的形式：

<template>
  <img :src="logo" alt="" @error="onError" />
</template>

<script>
  export default {
    data() {
      return {
        logo: "logo_url",
      };
    },
    methods: {
      onError() {
        this.logo = "default_url";
      },
    },
  };
</script>

如果是普通的 ssr 页面可以这么写，可以使用内联 js 绑定事件：

<img src="logo_url" alt="" onerror="this.src='default_url'" />

但内联 js 容易遭受到 xss 攻击，一般的网站都会开启 CSP 策略使得内联 JS 失效，该方法不建议使用。

同构 ssr

同构 ssr 是将 MVVM 框架的渲染部分放到服务端渲染的技术，其兼顾了 ssr 的性能和 seo 体验，同时又有客户端数据绑定的便捷性。

但在同构 ssr 的架构下，上方第一种数据绑定的方式实现就会存在问题。

具体原因在于 ssr 在输出 html 之后会有一次浏览器 hybrid 的过程，之后才会将事件绑定到 dom 上。

由于 js 本身加载执行就需要时间，这就会导致当图片加载失败的时候事件可能还未绑定，导致错误处理失效。

解决方案

问题的本质是图片加载失败发生在绑定事件之前，那么只需要想办法解决这个问题就可以了。

可以通过手动加载一张同样的图片，再次模拟原图加载的场景，从而实现错误处理。

<template>
  <img :src="logo" alt="" @error="onError" />
</template>

<script>
  export default {
    data() {
      return {
        logo: "logo_url",
      };
    },
    mounted() {
      const img = new Image();
      img.onerror = () => {
        this.logo = "default_url";
      };
      img.src = this.logo;
    },
  };
</script>