Vue中定义src在img标签使用时加载不出来的解决

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

// 下载安装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,
    }]
)

<img v-bind:src="imgUrl"/>

data(){
	return{
		imgUrl:"/static/logo.png"
	}
}

<img class="logo-img" src="@/assets/images/logo.png" alt="logo" />

<img :src="require('@/assets/images/sidederLogo.png')" class="sidebar-logo">

//HTML1
<img class="logo-img" :src="imgUrl" alt="logo" />
//JS
data(){
	return{
		imgUrl:require('./assets/logo.png')
	}	
}

//HTML1
<img class="logo-img" :src="imgUrl" alt="logo" />
//JS
data(){
	return{
		imgUrl: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
	}	
}