I am encountering a strange issue with the VueJS @error handler. My goal is to hide images with broken links and display a placeholder instead. However, when I have two images with broken links, only the first image displays the placeholder while the other one shows the browser's default broken image logo.
Below is the test code I used. I understand that this may not be the best way to write Vue code, but it served its testing purpose.
<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>I'm curious to know if the @error directive can handle multiple instances of broken images.