Search code examples
javascriptimagevue.jsvuejs3src

How to replace <img> src when the image URL is broken in Vue3?

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'" />