问题描述
vue2项目我们通常会在模板中通过三目运算符和require来实现动态图片,但是在vite+vue3项目中是没有require的,使用require会报错。
解决方案:
自定义require方法,如下:
在script中定义:
<script setup>
//自定义require方法
const myRequire = (name) => {
return new URL(`/src/assets/${name}.png`,import.meta.url).href
}
</script>
在模板中使用:
<template>
<img :src="true ? myRequire('pic_active') : myRequire('pic')" alt="">
</template>