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

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

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

代码和路径都没问题，发现图片并未显示

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

如果项目中使用的是vite，vite中是不支持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,// 要放在第一行，否则不生效
];

解决二（使用vite的话，推荐这种方案）：

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