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

我刚开始在我的网站的前端使用Vue。在我的Vue的组件之一，我想用一个特定路径的图像：当src不存在时更改图片源（两次）

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

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

检查是否在“路径中的文件/例如，/有/ VUE/VAR”存在

如果不是：的改变src到 “另一/路径/与/ VUE/VAR”

检查 “另一/路径/与/ VUE/VAR” 存在

如果不是：C焊割在src为“缺省的/路径”

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

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

来源

2017-08-01 Sander Van Keer

新Iamge，ABD图像加载事件， –

你能成为一个更具体一点？ –

https://stackoverflow.com/questions/3537469/detect-image-load –

我建议你使用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（）等

你能理解

来源

2017-08-01 12:40:11 Irrech

不是jQuery的使用VUE insted的。那么用vanila？ @Irrech –

是的，你也可以使用香草 – Irrech

像阿尔瓦罗说，我使用vue所以我只是要使用香草而不是jQuery –

-1

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

var img = new Image(); 

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

来源

2017-08-01 12:47:38

任何想法如何实现这一点的Vue？ –

来实现，这将是使一个组件出你正在使用你的v-for循环对象的一种简单方法。

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

在这种情况下

你这样做：

const image = new Image()

然后设置src就像这样：

image.src = <object>.src

在您设置图像对象的SRC，那么你可以检查您指定的图像已装入onload或与onerror失败。

我用支票做一些类似的在我的代码映像是否加载的，所以才能够与实际加载的图像替换占位符图像：

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

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

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

不知道我怎么会做任何对你更容易。

来源

2017-08-01 14:15:52

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

回答

相关问题