小编Puz*_*ian的帖子

我在 vueJs @error 处理程序中遇到了一个奇怪的问题，我想要
做的是隐藏带有损坏链接的图像，并显示一个占位符，但是如果我有两个图像并且它们都有一个损坏的链接，只有断开链接的第一张图像显示占位符，而另一个带有断开链接的图像仅显示，浏览器的断开图像默认徽标

这是我为测试所做的代码，我知道这不是在 Vue 中编写代码的正确方法，但它是用于测试目的

  <div id="app">
    <img width="25%" id="img" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Wallpaper-img_0254.jpg" @error="handle()">
    <img width="25%" id="img" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" @error="handle()">
    <img v-show="ifImageBroken" src="https://via.placeholder.com/300">
    <p>{{brokenText}}</p>
    <HelloWorld/>
  </div>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  data () {
    return {
      ifImageBroken: false,
      brokenText: ''
    }
  },
  components: {
    HelloWorld
  },
  methods: {
    handle : function() {
     document.getElementById('img').style.display = 'none'
     this.ifImageBroken = true;
     this.brokenText = 'unable to load image'
    }
  }
};
</script>

我只是想知道，这个@error指令是否可以处理多种损坏图像的情况