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