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

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!

CodePudding user response：

No need to use Vue in this case, there is a native solution:

<img src="..." one rror="this.onerror=null; this.src='Default.jpg'" />

CodePudding user response：

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>