javascript - VueJs @error 用于处理图像中损坏的链接

Question

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

这是我为测试所做的代码，我知道这不是在 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指令是否可以处理多种损坏图像的情况

Answer 1

我面临同样的问题，我使用 object解决这个问题，因为 @error 依赖于损坏的链接，而不是链接内损坏的图像，所以我创建了一些东西来在它们之间切换

<object data="https://here the right image if not found will display the image inside img tag.jpg" type="image/png">
    <img src="https://via.placeholder.com/300" alt="Not found image">
</object>

在第一个中将检查是否 :data在object找到与否，如果没有找到他会切换到<img>标签，您将在此处放置占位符图像，

更新2: 我使用你的代码并更新它，我希望它能工作

  <div id="app">
    <img width="25%" id="img" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Wallpaper-img_0254.jpg" @error="imgPlaceholder">

    <img width="25%" id="img" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" @error="imgPlaceholder">
    <p>{{brokenText}}</p>
    <HelloWorld/>
  </div>

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

export default {
  name: "App",
  data () {
    return {
      ifImageBroken: false,
      brokenText: ''
    }
  },
  components: {
    HelloWorld
  },
  methods: {
    imgPlaceholder(e) {
        e.target.src = "https://via.placeholder.com/300"
    }
  }
};
</script>

在这里，我创建了一个新方法，它接受一个事件并用另一个图像更改当前损坏的 URL 图像