# image can't find, set default
###### tags: `網頁程式` `vue`

Html 使用 `img` tage 時，可用 `onerror` 設定取圖錯誤時執行 javascript 程式。
但 `onerror` 若也執行錯誤會陷入無窮迴圈，所以要加入條件式避免

<img src="../resources/images/Image1.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';'" />

若是 React 或 vue 需要動態調整圖片位置，則可以靠傳入 event 控制

//html
<img src="../resources/images/Image1.jpg" onError={(e) => imageOnerror(g.gameCode, e)} alt="Avatar" style={{ width: "100%" }} />      

//javascript
  const imageOnerror = (gameCode, el) => {
    var bucketUrl = process.env.REACT_APP_BUCKET_URL;
    let enPath = `${bucketUrl}/${gameCode}-en.jpg`;
    if(el.target.src !== enPath){
      el.target.src = enPath;
    }
  }

### 相關連結
[Inputting a default image in case the src attribute of an html <img> is not valid? - stackeoverflow](https://stackoverflow.com/questions/980855/inputting-a-default-image-in-case-the-src-attribute-of-an-html-img-is-not-vali)