问题
在使用 Vue3 开发的时候，展示动态图片功能，我们都知道，引入一张图片可以使用下面的方法。
<img src="/src/assets/images/my-image.png" alt="Image" class="logo" />
如果要根据数据库返回的数据来展示，应该是这样实现才对吧。
<img :src="'/src/assets/images/' + menuItem.iconSource" />
这里的 menuItem 是数据库返回的，例如 home.png 等等，在开发环境可以正常运行，但是构建完发布到生产环境，报的是 404，非常苦恼。
我们先来理解下 Vite 在处理静态资源是如何处理的，通过查阅 官方文档 可以了解到。
import imgUrl from "./img.png";
document.getElementById("hero-img").src = imgUrl;
imgUrl 最终构建完的路径为 /assets/img.2d8efhg.png
要解决动态图片路径问题，首先要先理解 new URL(url, import.meta.url) 这个方法。
new URL(url, import.meta.url)
import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：
const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl
这样 Vite 并不需要在开发阶段处理这些代码
这个模式同样还可以通过字符串模板支持动态 URL
function getImageUrl(name) {
return new URL(`./dir/${name}.png`, import.meta.url).href
}
经过几天几夜的尝试，最终找到了解决方法，下面主要针对静态图片路径，动态图片路径（相对路径/绝对路径）这几种情况进行讲解。
静态图片路径
可以通过 import 关键字来引入图片，然后在 template 中使用它。
<script setup>
import imageUrl from "@/assets/images/logo.svg";
</script>
<template>
<img :src="imageUrl" alt="img" />
</template>
动态图片路径（相对路径）
<script setup>
const imageUrl = new URL(`./dir/${name}.png`, import.meta.url).href
</script>
<template>
<img :src="imageUrl" alt="img" />
</template>
动态图片路径（绝对路径）
注意，这里的路径不能使用 @ 来实现，必须是项目的绝对路径才行
<script setup>
const imageUrl = new URL('/src/assets/images/logo.svg', import.meta.url);
</script>
<template>
<img :src="imageUrl" alt="img" />
</template>
注意这个
import.meta.url在node环境下表现不一致，所以不能用于SSR
