當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不存在時更改圖片源（兩次）

回答

相關問題