Vuetify v-img 本地图片不显示的终极解决方案-js教程-PHP中文网

Vuetify v-img 本地图片不显示的终极解决方案

Vuetify 的组件无法直接渲染 src 中的 @/assets/... 路径图片，根本原因在于该路径是 Webpack 模块别名，需经 require() 解析为真实打包后 URL；直接字符串绑定会导致 404。本文详解正确加载方式、目录规范与避坑要点。

vuetify 的 `` 组件无法直接渲染 `src` 中的 `@/assets/...` 路径图片，根本原因在于该路径是 webpack 模块别名，需经 `require()` 解析为真实打包后 url；直接字符串绑定会导致 404。本文详解正确加载方式、目录规范与避坑要点。

在 Vue + Vuetify 项目中，你遇到的 GET http://localhost:8082/@/assets/images/figma3d.png 404 (Not Found) 错误，并非图片文件缺失，而是路径未被 Webpack 正确解析——"@/assets/images/figma3d.png" 是一个模块路径别名（由 vue.config.js 或 @vue/cli-service 配置的 resolve.alias 定义），它不能直接作为字符串传给 :src。浏览器会将其当作普通 URL 去请求，而开发服务器（如 webpack-dev-server）并不处理以 @/ 开头的 HTTP 请求，因此必然返回 404。

✅ 正确做法：使用 `require()` 动态导入

Vue CLI（基于 Webpack）要求所有位于 src/assets/ 下的静态资源必须通过 require()（或 import）显式声明，才能被识别、处理（如添加 hash、压缩、输出到 dist）并生成正确的运行时路径。

将你的项目数据中的本地图片路径从字符串改为 require() 调用：

// ❌ 错误：纯字符串，Webpack 不处理
image: "@/assets/images/figma3d.png"

// ✅ 正确：动态 require，Webpack 解析并返回最终 public URL
image: require("@/assets/images/figma3d.png")

同时，在模板中保持 :src 绑定（注意冒号 : 表示动态绑定）：

<v-img width="200" :src="project.image"></v-img>

完整修正后的 data() 示例：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

data() {
  return {
    projects: [
      // ...其他项目
      {
        name: "3D Demo 1",
        github: "",
        url: "https://unclefonso-3d-demo-uecg.vercel.app/",
        tech: "React, Spline",
        description: "A design created in Figma and ported over to 3D...",
        image: require("@/assets/images/figma3d.png"), // ✅ 已修正
      },
      {
        name: "Covid Tracker",
        github: "",
        url: "https://vue-covid-tracker-theta.vercel.app/",
        tech: "Vue 3, external API",
        description: "Experimental api consumer demo.",
        image: require("@/assets/images/covid_tracker.png"), // ✅ 已修正
      }
    ]
  };
}

? 替代方案：使用 `public/` 目录（适合静态不变资源）

若图片极少变动、无需 Webpack 处理（如 logo、banner 图），可将图片移至 public/images/，然后使用绝对路径引用（无需 require）：

project-root/
├── public/
│   └── images/
│       ├── figma3d.png
│       └── covid_tracker.png
├── src/
└── ...

模板中直接写：

<v-img width="200" :src="`/images/${project.imageName}`"></v-img><!-- 或静态写死 --><v-img width="200" src="/images/figma3d.png"></v-img>

⚠️ 注意：public/ 下的路径以 / 开头，对应部署后的网站根路径（如 https://yoursite.com/images/xxx.png），需确保 vue.config.js 中 publicPath 配置匹配（默认为 '/'）。

⚠️ 关键注意事项

不要混用路径类型：@/assets/ 必须配 require()；/public/ 必须配绝对路径 /xxx；二者不可交叉。
动态路径需预加载：若 project.image 是变量拼接（如 "/images/" + name + ".png"），且图片名不确定，则 require() 无法静态分析 → 必须改用 public/ + 字符串拼接，或提前构建映射表。
检查文件存在性与大小写：figma3d.png ≠ Figma3D.PNG（尤其在 Linux/macOS 环境下敏感）。
Vuetify 版本无关性：此问题与 Vuetify 版本无关（v-img 本质是 <img> 封装），核心是 Vue + Webpack 的资源处理机制。