用javascript判斷圖片是否存在_不存在則顯示預設圖片的程式碼

在網站或應用程式中，有時我們需要顯示一張圖片，但不確定該圖片是否存在或在伺服器上是否被刪除。這時候，如果直接顯示該圖片，可能會出現錯誤的情況。為了解決這個問題，我們可以使用Javascript程式碼來判斷圖片是否存在，在圖片不存在的情況下，顯示一張預設圖片。本文將介紹如何使用Javascript來實現該功能。

首先，我們需要先將要顯示的圖片包裹在一個div或img標籤中，並且在該標籤中設定一個自訂的屬性src-real，用來儲存圖片的真實路徑。程式碼如下：

<div class="image-container">
  <img  class="image" src="" src-real="path/to/image.jpg" alt="用javascript判斷圖片是否存在_不存在則顯示預設圖片的程式碼" >
</div>

接下來，我們可以使用Javascript來判斷圖片是否存在。使用Image物件的onload和onerror事件，可以在圖片載入完成或載入失敗時觸發對應的事件處理函數。我們可以在載入完成事件onload中設定圖片的src屬性為真實路徑src-real，以此來顯示圖片；在載入失敗事件onerror中設定圖片的src屬性為預設圖片的路徑，如下所示：

// 获取所有要判断的图片节点
const images = document.querySelectorAll('.image')

// 循环遍历每个图片节点
images.forEach(image => {

  // 创建一个新的Image对象
  const img = new Image()

  // 加载完成，显示实际图片
  img.onload = () => {
    image.src = image.getAttribute('src-real')
  }

  // 加载失败，显示默认图片
  img.onerror = () => {
    image.src = 'path/to/default-image.jpg'
  }

  // 设置Image对象的src属性并加载图片
  img.src = image.getAttribute('src-real')
})

在上述程式碼中，我們首先透過querySelectorAll方法取得所有要判斷的圖片節點，並且循環遍歷每個圖片節點。然後，我們建立了一個新的Image對象，並設定了其onload和onerror事件處理函數。當圖片載入完成時，onload事件被觸發，我們可以透過getAttribute方法取得圖片的真實路徑src-real，並將路徑賦值給圖片節點的src屬性，以顯示實際圖片；當圖片載入失敗時， onerror事件被觸發，我們可以將圖片節點的src屬性設定為預設圖片的路徑，從而顯示預設圖片。

最後，我們需要在CSS中設定預設圖片的樣式，這樣當圖片載入失敗時，可以顯示正確的預設圖片。程式碼如下：

.image {
  width: 300px;
  height: 200px;
  background-color: #ddd;
}

.image[src*="default"] {
  background-image: url('path/to/default-image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

在上述程式碼中，我們先設定圖片的寬度、高度以及背景色。然後，我們透過CSS屬性選擇器[src*="default"]來選擇所有src屬性中包含"default"的圖片節點，然後設定該圖片節點的背景圖片為預設圖片的路徑，以此來達到顯示預設圖片的效果。

綜上所述，我們可以透過Javascript程式碼來判斷圖片是否存在，並在圖片不存在時，顯示預設圖片。這樣可以增強使用者的體驗，並減少因圖片載入失敗而導致的錯誤情況。

以上是用javascript判斷圖片是否存在_不存在則顯示預設圖片的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！