I have a list of data table rows rendered in Vue3 with a v-for directive. In each row there is a tag with a src URL to the image online. Whenever the image URL is broken (the image does not exist anymore), I would like the src URL to change to a default value.
With jQuery I could do the following:
$('img').on("error", function() {
$(this).attr('src', 'fallbackURL');
});
How can I do something similar in Vue3? I am looking for the lightest possible solution as there could potentially be many rows and many broken image URLs. I would not mind keeping this jQuery solution but I do not know how to implement it in Vue.
Very thankful for any help!
No need to use Vue in this case, there is a native solution:
<img src="..." onerror="this.onerror=null; this.src='Default.jpg'" />
you can do it like this using @error and put the function you want if the image is not found or broken then change the src to the default image.
Try it this way.
I use this as a default image -> https://i.ibb.co/5908vXL/Screenshot-from-2021-06-15-11-13-44.png
<script src="https://unpkg.com/vue"></script>
<div id="app">
<img src="test.png" @error="imageLoadOnError"/>
</div>
<script>
new Vue({
el: '#app',
methods: {
imageLoadOnError(e) {
e.target.src = "https://i.ibb.co/5908vXL/Screenshot-from-2021-06-15-11-13-44.png"
}
}
})
</script>