解决vite+vue3项目的模板中不能使用require导入图片的问题

问题描述

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>