當(dāng)圖片image1加載失敗后，要顯示默認(rèn)圖片image2，可以使用img中的onerror屬性顯示

<template>
  <img width="300" src="/image1.jpg" onerror="this.src='/image2.jpg'" />
</template>

但是直接用上面的形式表達(dá)容易出現(xiàn)的問(wèn)題有，當(dāng)圖片為一個(gè)變量時(shí)，圖片會(huì)無(wú)法即時(shí)顯示，t其中this.scr容易被誤會(huì)為上下文的值，其實(shí)這個(gè)值指向于img
標(biāo)簽
那么修改上述的代碼為

<template>
  <!-- :src為vue3.4的語(yǔ)法糖，等同于:src=src -->
  <img width="300" :src />
</template>

<script setup lang="ts">
import { ref} from 'vue'

const src = ref('')

function loadImage(src:string) {
  return new Promise<string>((resolve,reject) => {
    //判斷圖片是否可以訪問(wèn)，創(chuàng)建一個(gè)對(duì)象
    const image = new Image()
    image.src = src
    image.onload = () => resolve(src)
    image.onerror = (err) => reject(err)
  })
}

loadImage('/image1.jpg').then((res)=>{
  console.log(res)
  //如果加載成功
  src.value = res
}).catch((err)=>{
  src.value = '/image2.jpg'
})

</script>