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!
>Solution :
No need to use Vue in this case, there is a native solution:
<img src="..." onerror="this.onerror=null; this.src='Default.jpg'" />