當圖片image1加載失敗后，要顯示默認圖片image2，可以使用img中的onerror屬性顯示

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

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

<template>
  <!-- :src為vue3.4的語法糖，等同于: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) => {
    //判斷圖片是否可以訪問，創(chuàng)建一個對象
    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>