用的是 Vue 3 + Vite，那就要记住两点核心规则：

• ✅ Vite 不支持 require()，要用 new URL(..., import.meta.url)。

• ✅ 如果图片是打包进项目的（在 src/assets 下），就必须这样动态导入。

---

✅ 正确写法：使用 new URL() 动态图片路径

例子 1：最常用的写法

<template> <div> <img :src="getImgUrl('dog.png')" alt="狗狗" /> </div> </template> <script setup> function getImgUrl(name) { // 路径相对于当前文件位置 return new URL(`../assets/images/${name}`, import.meta.url).href } </script>

⚙️ 这会在构建时自动让 Vite 处理图片资源（压缩、hash 等），并返回正确的打包后路径。

---

例子 2：列表循环动态显示图片

---

✅ 如果图片放在 public 目录

例如：public/images/dog.png

<template> <img :src="`/images/${fileName}`" alt="狗狗" /> </template> <script setup> const fileName = 'dog.png' </script>

⚠️ 注意路径要以 / 开头，因为 public 目录下的文件不会被打包处理。

---

💡 总结对比

图片位置	推荐写法	是否参与打包
src/assets	new URL(..., import.meta.url)	✅ 是
public	/images/...	❌ 否

---

---

📁 文件结构示例

src/ ├─ assets/ │ └─ images/ │ ├─ cat.png │ ├─ dog.png │ └─ bird.png └─ components/ └─ ImageGallery.vue

---

📄 ImageGallery.vue

<template> <div class="p-6"> <h2 class="text-2xl font-bold mb-4 text-gray-700">🐾 动态图片画廊</h2> <div class="grid grid-cols-3 gap-4"> <div v-for="img in images" :key="img" class="overflow-hidden rounded-2xl shadow hover:scale-105 transition-transform duration-300" > <img :src="getImgUrl(img)" :alt="img" class="w-full h-48 object-cover" /> <p class="text-center text-gray-600 mt-2">{{ img }}</p> </div> </div> </div> </template> <script setup> const images = ['cat.png', 'dog.png', 'bird.png'] function getImgUrl(name) { // ⚠️ 注意路径：相对于当前文件位置 return new URL(`../assets/images/${name}`, import.meta.url).href } </script> <style scoped> /* 可选样式增强 */ .grid { max-width: 800px; margin: 0 auto; } </style>

---

✅ 使用方法

在 App.vue 中引入：

<template> <ImageGallery /> </template> <script setup> import ImageGallery from './components/ImageGallery.vue' </script>

然后运行：

npm run dev

你会看到一个动态图片网格画廊，图片路径都是通过 new URL(..., import.meta.url) 动态计算的。