VueJs @error用于处理图像中的断开链接

时间:2018-11-30 12:38:17

标签: javascript vue.js components onerror

我要使用vueJs @error处理程序遇到一个奇怪的问题,
要做的是隐藏具有断开链接的图像,而是显示一个占位符,但是例如,如果我有两个图像,并且两个图像都有断开的链接,则只有断开链接的第一个图像显示占位符,而另一个图像带有断开链接的链接只是在显示,浏览器的断开图像默认徽标

这是我用于测试的代码,我知道这不是在Vue中编写代码的正确方法,但这只是出于测试目的

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

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

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

我只是想知道,此@error指令是否可以处理多种情况下的图像损坏

1 个答案:

答案 0 :(得分:0)

我遇到了同样的问题,我使用object解决了这个问题,因为@error依赖于损坏的链接,而不是链接中的损坏图像,因此我创建了一些在它们之间切换的东西

<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>

在第一个中,将检查:data中的object是否找到,如果找不到,他将切换到<img>标签,在这里您将放置占位符图像,

更新2: 我使用您的代码并对其进行更新,希望它能起作用

  <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>

在这里,我创建了一个新方法,该方法接受一个事件并用另一个方法更改当前断开的URL图像