Vue 3 中动态绑定 img src 的正确方法-js教程-PHP中文网

Vue 3 中动态绑定 img src 的正确方法

在 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 服务路径。当你写死时，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>
  @@##@@
</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>

? 进阶提示：

蓝湖代码转vue2.0+element-ui

将静态 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 等所有需要动态加载静态资源的场景。