在網站或應用程式中，有時我們需要顯示一張圖片，但不確定該圖片是否存在或在伺服器上是否被刪除。這時候，如果直接顯示該圖片，可能會出現錯誤的情況。為了解決這個問題，我們可以使用Javascript程式碼來判斷圖片是否存在，在圖片不存在的情況下，顯示一張預設圖片。本文將介紹如何使用Javascript來實現該功能。
首先，我們需要先將要顯示的圖片包裹在一個div或img標籤中，並且在該標籤中設定一個自訂的屬性src-real，用來儲存圖片的真實路徑。程式碼如下：
接下來，我們可以使用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中文網其他相關文章！
