html中圖像標記的alt屬性

Question

場景：

 <img src="filepath" alt="image not found">

這將確保如果在路徑中找不到該文件，那么將加載文本.....

問題：可以加載圖像而不是替代文本嗎？ 有沒有任何標簽可以滿足我的目的，是否有任何自定義的JavaScript函數，可以在#alt標簽？

Answer 1

您可以檢查JavaScript中加載的圖像是否：

var img = document.getElementById('image');
if ( img.complete && img.naturalWidth == 0 ) {
  // some error, load alternate image:
  img.src = "path to alternative img";
}

---

編輯：完整的解決方案（使用來自@ JoDev的答案的onerror ）將是：

<script>
function validate (img) {
  // Clear the callback to avoid infinite loop in case
  // new image path would be also invalid.
  img.onerror = null;

  if ( img.complete && img.naturalWidth == 0 ) {
    // some error, load alternate image:
    img.src = "http://example.com/valid_path.png";
  }
}
</script>

<img onerror="javascript:validate(this);" 
     src="http://example.com/some_invalid_path.png"/>

Answer 2

有一個特殊的事件可以讓你做到這一點。 它的 ：

<img src="" onerror="this.src='path/to/default'" />

Answer 3

請參考以下代碼..

在onerror函數內添加你想要加載的src路徑。 如果src是圖像加載。

<img onerror="this.onerror=null;this.src='http://www.personal.psu.edu/oeo5025/jpg.jpg'" id="ddd" 
src='http://www.loveimagesdownload.com/wp-content/uploads/2016/08/declaration-of-love_23-2147517078.jpg'/>