[Vuejs]-VueJs @error for handling broken links in images

by

5👍

I face the same problem and I use object to solve it because @error depend on broken links but not broken images inside links, so I create something to switch between them

<object data="https://here the right image if not found will display the image inside img tag.jpg" type="image/png">
    <img src="https://via.placeholder.com/300" alt="Not found image">
</object>

In the first one will check if :data in object found or not, if not found he will switch to <img> tag and here you will put your placeholder image,

Update 2:
I use your code and update it, I hope it work

  <div id="app">
    <img width="25%" id="img" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Wallpaper-img_0254.jpg" @error="imgPlaceholder">

    <img width="25%" id="img" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" @error="imgPlaceholder">
    <p>{{brokenText}}</p>
    <HelloWorld/>
  </div>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  data () {
    return {
      ifImageBroken: false,
      brokenText: ''
    }
  },
  components: {
    HelloWorld
  },
  methods: {
    imgPlaceholder(e) {
        e.target.src = "https://via.placeholder.com/300"
    }
  }
};
</script>

Here I create a new method that takes an event and change current broken URL image with another one

👤Moumen Soliman

Leave a comment