Question

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

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

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

检查文件是否在＆＃34; path / example / with / vue / var＆＃34;存在

如果不是：将src更改为＆＃34;另一个/ path / with / vue / var＆＃34;

检查＆＃34;另一个/ path / with / vue / var＆＃34;存在

如果不是：将src更改为＆＃34;默认/路径＆＃34;

我已经尝试使用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');
  })

在失败功能中，您可以为其他路径重新制作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

简单的demo，您需要添加recurseve第二次尝试。

var img = new Image();

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

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

3 个答案: