src不存在时更改图像源（两次）

Question

我刚开始在网站的前端使用Vue 。 在我的Vue组件之一中，我想要具有一定路径的图像：

<img src="path/example/with/vue/var">

现在，这就是我想要做的：

• 检查“ path / example / with / vue / var”中的文件是否存在
• 如果不是，请执行以下操作：将src更改为“ another / path / with / vue / var”
• 检查是否存在“另一个/路径/具有/ vue / var”
• 如果不是：将src更改为“ default / path”

我已经尝试过将onerror与内部函数一起使用。 但是问题是我正在加载100个以上的对象，并且每个对象有几个图像。 如果我只是检查文件是否存在正常方式（通过Ajax或XMLHttpRequest），则性能将完全消失。 所有对象均通过JSON文件加载。

我希望你们能理解这个问题。

Answer 1

我建议您使用https://imagesloaded.desandro.com/

您可以了解路径是否以这种方式存在

$('#container').imagesLoaded()
  .always( function( instance ) {
    console.log('all images loaded');
  })
  .done( function( instance ) {
    console.log('all images successfully loaded');
  })
  .fail( function() {
    console.log('all images loaded, at least one is broken');
  })

在Fail函数中，您可以为另一个路径重新创建imagesLoaded（），依此类推。

Answer 2

一种简单的实现方法是使组件在v-for循环中使用的对象之外。

然后，您可以简单地使用计算属性来检查对象的src属性。

在这种情况下，您可以：

const image = new Image() 

然后像这样设置src：

image.src = <object>.src 

在Image对象上设置src之后，可以检查指定的图像是否已加载onload或因onerror失败。

我通过检查图像是否已加载来在代码中执行类似的操作，因此可以将占位符图像替换为实际加载的图像：

setImagePlaceholder(hotel) {
    this.$set(hotel, 'imgLoaded', false);

    const image = new Image();
    image.src = hotel.thumbUrl;

    image.onload = () => {
        hotel.imgLoaded = true;
    };
}

不知道我该如何简化您的工作。

Answer 3

这是一个简单的演示 ，您需要添加recurseve第二次尝试。

var img = new Image();

img.onload=function(){
     console.log('loaded!');
 };
 img.onerror = function(){
    console.log("error");
 }
 img.src='something';