vue.js - Vue 的 img 标签上的 @error 是否监听 onerror 事件？

Question

我遇到了一个问题，如果找不到图像的 src 属性，我需要使用后备图像。我看到的关于 Vue 的大多数建议是使用 @error:

<img src="badsrc.jpg" @error="handleError" />

这很好用。我的 handleError 逻辑在图像 404 时运行，并且我能够在组件上设置 data 属性，然后计算属性使用该数据来检测图像源是否需要使用后备图像。但我注意到，根据 MDN(Mozilla 开发者网络)，img 标记上的 onerror 属性已被弃用，不应使用。此外，IE11 对 onerror 的支持尚不清楚(幸运的是，该浏览器应于今年 11 月正式停用)。

这是否意味着我不应该在 Vue 中的 img 上使用 @error，或者 @error 确实在背后做了其他事情场景？我注意到我编译的 HTML 没有图像的 onerror 属性。

Answer 1

这按预期工作:

new Vue({
  el: '#app',
  data() {
    return {
      src: '/src.png',
      backupSrc: 'https://via.placeholder.com/300.png/09f/fff',
      didLoad: true,
    };
  },
  methods: {
    pictureLoadingError() {
      this.didLoad = false;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app" v-cloak>
  <div>
    <img v-if="didLoad" :src="src" @error="pictureLoadingError" />
    <img v-else :src="backupSrc" />
  </div>
</div>

MDN 弃用

看起来图表有点误导。该规范已从 img 标记属性中弃用，并有效地移至全局 GlobalEventHandlers 规范中。

可以在这里找到:https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror

您可以看到页面末尾的图表中没有弃用图标。