Vue中實現當img圖片加載失敗的時候顯示本地默認圖片_ico

 頁面

<img
          :src="getInstIcon({ baseAsset: item.icon })"
          @error="coinDefaultImgHandle"
          style="border-radius: 50%"
        />

import { getInstIcon, coinDefaultImgHandle } from '@/utils';


邏輯部分

utils


import coinDefaultImg from '@/assets/images/coin-default-icon.svg';

export function getInstIcon({ instId, baseAsset }) {
  let asset = baseAsset;
  if (instId) {
    [asset] = instId.split('-');
  }

  return `https://xxx/png/${asset.toUpperCase()}.png`;

}

export function coinDefaultImgHandle(event){
  const img = event.srcElement;
  img.src = coinDefaultImg;
  img.onerror = null;
}