图片加载失败后如何显示默认图片

当图片image1加载失败后，要显示默认图片image2，可以使用img中的onerror属性显示

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

但是直接用上面的形式表达容易出现的问题有，当图片为一个变量时，图片会无法即时显示，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) => {
    //判断图片是否可以访问，创建一个对象
    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>