vue3+vite 动态引入图片的方法

单个资源引入：

<script setup>
    // 引入
    import Img from '../assets/images/img.png'
</script>

<template>
    <!-- 使用 -->
    <img :src="Img" />
</template>

多个资源引入（动态）：

new URL(url, import.meta.url)
import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL

<script setup>
    // 引入
    let Img = new URL('@/assets/images/img.png', import.meta.url).href
</script>

<template>
    <!-- 使用 -->
    <img :src="Img" />
</template>

也可以封装成函数，方便多次引用：

<script setup>
    function getImg(url){
        return new URL(url, import.meta.url).href
    }
</script>

<template>
    <!-- 使用 -->
    <img :src="getImg('图片资源路径')" />
</template>