Vue中定义src在img使用时加载不出来

问题：路径正确，但是图片加载不出来，如下示例：

<!--vue3的语法，vue2类似-->
<template>
    <img  :src=""/>	
</template>
<script setup>
	import {ref} from 'vue';
    const src = ref('图片路径');
</script>

代码和路径都没问题，发现图片并未显示，以下为项目中使用vite构建工具时的解决方案：

解决一：使用require引入图片（commonJs语法）

vite是不支持require引用的。使用require时控制台会报错：require is not defined

这个时候就需要下载commonJs包，示例如下：

// 下载安装commonjs包--vite3
yarn add  vite-plugin-commonjs
// vite2中可以安装这个
npm i @rollup/plugin-commonjs
//2.在vite.config.ts配置中添加该插件（如果是js就换成js版的）
import commonjs from '@rollup/plugin-commonjs';
const plugins = [
    commonjs() as any,// 要放在第一行，否则不生效
];

解决二（推荐）：
注意：使用的是相对路径

// import.meta.url是当前模块的url，和图片的相对路径合并就是一个完整的URL
const list = ref(
    [{
        src: new URL('相对路径', import.meta.url).href,
    }]
)