javascript - VueJs @error for handling broken links in images - Stack Overflow

admin管理员组

文章数量:1336181

I am facing a weird problem with vueJs @error handler, what I want to
do is to hide the images with broken links, and display a placeholder instead, but if I have for examples two images and both of them have a broken links, only the first image of the broken link is displaying the placeholder, while the other image with a broken link is just displaying, the browser's broken image default logo

here's the code I did for testing, I know this is not a proper way of writing the code in Vue, but it was for testing purposes

  <div id="app">
    <img width="25%" id="img" src=".jpg" @error="handle()">
    <img width="25%" id="img" src=".jpeg?auto=press&cs=tinysrgb&h=350" @error="handle()">
    <img v-show="ifImageBroken" src="">
    <p>{{brokenText}}</p>
    <HelloWorld/>
  </div>

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

export default {
  name: "App",
  data () {
    return {
      ifImageBroken: false,
      brokenText: ''
    }
  },
  ponents: {
    HelloWorld
  },
  methods: {
    handle : function() {
     document.getElementById('img').style.display = 'none'
     this.ifImageBroken = true;
     this.brokenText = 'unable to load image'
    }
  }
};
</script>

I just wanted to know, if this @error directive can handle multiple cases of broken images

I am facing a weird problem with vueJs @error handler, what I want to
do is to hide the images with broken links, and display a placeholder instead, but if I have for examples two images and both of them have a broken links, only the first image of the broken link is displaying the placeholder, while the other image with a broken link is just displaying, the browser's broken image default logo

here's the code I did for testing, I know this is not a proper way of writing the code in Vue, but it was for testing purposes

  <div id="app">
    <img width="25%" id="img" src="https://upload.wikimedia/wikipedia/mons/5/54/Wallpaper-img_0254.jpg" @error="handle()">
    <img width="25%" id="img" src="https://images.pexels./photos/248797/pexels-photo-248797.jpeg?auto=press&cs=tinysrgb&h=350" @error="handle()">
    <img v-show="ifImageBroken" src="https://via.placeholder./300">
    <p>{{brokenText}}</p>
    <HelloWorld/>
  </div>

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

export default {
  name: "App",
  data () {
    return {
      ifImageBroken: false,
      brokenText: ''
    }
  },
  ponents: {
    HelloWorld
  },
  methods: {
    handle : function() {
     document.getElementById('img').style.display = 'none'
     this.ifImageBroken = true;
     this.brokenText = 'unable to load image'
    }
  }
};
</script>

I just wanted to know, if this @error directive can handle multiple cases of broken images

• javascript
• vue.js
• ponents
• onerror

Share Follow edited Nov 30, 2018 at 13:06 Puzant Bakjejian asked Nov 30, 2018 at 12:38 Puzant BakjejianPuzant Bakjejian 6744 silver badges1010 bronze badges 1

• I think the problem may be that you have 2 img elements with the same id value. Standard HTML doesn't allow this since id's need to be unique. If you have multiple elements with the same id, only (I believe) the first will work with the getElementById – T. Dirks Commented Nov 30, 2018 at 12:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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./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/wikipedia/mons/5/54/Wallpaper-img_0254.jpg" @error="imgPlaceholder">

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

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

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

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

本文标签： javascriptVueJs error for handling broken links in imagesStack Overflow