vue img onerror事件及vite img src

vue img onerror事件

当图像的地址不能使用时，使用默认的图片

<img :src="item.prop" @error="defaultSrc"/>

defaultSrc (event) {
  const img = event.srcElement  // 刚开始是以参数的形式定义的，但是默认的图片一直不能使用，遂改为此方式
  img.src = './20211103110717.png' // 默认一张图片。若是public中的图片，直接 ./ 就可以
  // 或 img.src = require('@/assets/images/20211103110717.png')
  img.onerror = null // 若默认的图片地址亦无法正常使用，添加此可控制不一直跳动
}

另：若以动态的方式给img src赋值，切记要加require,例：

{
id:1,
prop: require('@/assets/images/20211103110717.png')
}

vite img src

场景：开发环境下使用下方的方式可以正常显示，但是生产环境下图片不能显示

<template v-for="(item, index) in entranceModule">
    <div @click="jumpModule(item.jumpAddress)">
        <img :src="item.svgUrl" class="item"/>
        <span class="text item">{{ item.text }}</span>
    </div>
</template>

const entranceModule = reactive([
    { svgUrl: '/src/assets/image/slice_mgr.png', text: '切片管理', jumpAddress: '/section'},
    { svgUrl: '/src/assets/image/special_mgr.png', text: '专题管理', jumpAddress: '/special/specialcreate'},
    { svgUrl: '/src/assets/image/ai_read.png', text: '智能阅片', jumpAddress: ''}
])

换成new URL的方式是可以的：
const entranceModule = reactive([
    { svgUrl: new URL('../assets/image/slice_mgr.png', import.meta.url).href, text: '切片管理', jumpAddress: '/section'},
    { svgUrl: new URL('../assets/image/special_mgr.png', import.meta.url).href, text: '专题管理', jumpAddress: '/special/specialcreate'},
    { svgUrl: new URL('../assets/image/ai_read.png', import.meta.url).href, text: '智能阅片', jumpAddress: '/read/speciallist'}
])