在 Vue 3（Vite）项目中，直接用 v-bind 绑定相对路径字符串（如 '@/assets/...'）会导致 404，因为构建工具无法在运行时解析 @ 别名；必须通过 new URL(..., import.meta.url) 显式告知 Vite 需要预编译该资源。
在 vue 3（vite）项目中，直接用 `v-bind` 绑定相对路径字符串（如 `'@/assets/...'`）会导致 404，因为构建工具无法在运行时解析 `@` 别名；必须通过 `new url(..., import.meta.url)` 显式告知 vite 需要预编译该资源。
在 Vue 3 + Vite 构建的项目中，静态资源（如图片）的路径处理机制与传统 HTML 或 Vue 2 有本质区别：Vite 在开发阶段依赖 ES 模块解析，所有被引用的静态资源必须在构建时被显式识别并纳入依赖图谱，才能生成正确的哈希路径和 HTTP 服务路径。当你写死 <img src="@/assets/..." alt="Vue 3 中动态绑定 img src 的正确方法" > 时，Vite 的 HTML 插件会自动识别并重写该路径；但若使用 :src="ImgUrl" 动态绑定，且 ImgUrl 是纯字符串（如 '@/assets/images/pics/cover_info.jpeg'），Vite 完全无法感知该资源依赖——它只会在浏览器运行时尝试向 /assets/images/pics/cover_info.jpeg 发起请求，而该路径未经构建处理，自然返回 404。
✅ 正确做法是：利用 import.meta.url 和 new URL() 构造模块内联 URL，让 Vite 在编译期捕获资源引用：
<template>
<img :src="imageUrl" alt="Cover image" />
</template>
<script>
export default {
name: 'Image',
data() {
return {
selectedImage: '@/assets/images/pics/cover_info.jpeg'
}
},
computed: {
imageUrl() {
// ✅ 关键：将路径转为模块 URL，触发 Vite 预构建
return new URL(this.selectedImage, import.meta.url).href
}
}
}
</script>? 进阶提示：
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 若需支持多种图片路径（如用户上传、远程 URL、本地静态资源混合），建议封装判断逻辑：
computed: { imageUrl() { const url = this.selectedImage // 本地静态资源（以 @/ 或 ./ 开头）才走模块解析 if (url?.startsWith('@/') || url?.startsWith('./') || url?.startsWith('../')) { return new URL(url, import.meta.url).href } return url // 直接返回远程 URL 或已处理的绝对路径 } } - 使用
<script setup></script>语法糖时更简洁：<script setup> import { computed } from 'vue' const selectedImage = '@/assets/images/pics/cover_info.jpeg' const imageUrl = computed(() => new URL(selectedImage, import.meta.url).href) </script>
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要对
new URL()的结果做字符串拼接或二次解析（如url.toString().replace(...)），这会破坏 Vite 的资源追踪； -
import.meta.url必须保留（不可替换为document.currentScript?.src等运行时值），它是 Vite 定位模块上下文的关键； - 图片路径必须是静态可分析的字符串字面量（如
'@/...'），不能是动态拼接（如'/assets/' + name + '.png'），否则 Vite 无法在构建期识别资源。
掌握这一机制，不仅能解决 img 标签问题，也适用于 audio、video、CSS background-image 等所有需要动态加载静态资源的场景。
