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

Question

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

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

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

这是否意味着我不应该@error在imgVue 中使用，或者@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

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