使用 JavaScript 錯誤更改圖像 src

Question

我有一張有時會返回 404 錯誤的圖像。 要加載圖像，通常只需對圖像 src 稍作修改即可，例如在其末尾添加“ ?reload=true ”。 如何使用 JavaScript 執行此操作？

<img src="example.com/image.png" onerror="reloadImage()">

<script>

function reloadImage() {

    // Set img src to "example.com/image.png?reload=true"

}

</script>

Answer 1

嘗試將元素傳遞到 function 中，同時清除錯誤事件，否則可能會無限循環。

function reloadImage(img) {
  img.onerror = null

  let url = new URL(img.src)
  url.searchParams.set('reload', 'true')
  img.src = url.toString()
}

<img src="example.com/image.png" onerror="reloadImage(this)">

理想的解決方案是首先找出它出錯的原因並修復它。