Vuetify 的 组件无法直接加载 src/assets/ 下的本地图片，根本原因在于 Webpack 未对字符串路径进行模块解析——必须通过 require() 显式导入或改用 public/ 目录静态引用。
vuetify 的 `
在你的代码中，最后两个项目（3D Demo 1 和 Covid Tracker）的 image 字段被赋值为 "@/assets/images/figma3d.png" 和 "@/assets/images/covid_tracker.png"，但这是纯字符串字面量，而非经过 Webpack 处理的模块路径。因此浏览器实际发起请求的是：GET http://localhost:8082/@/assets/images/figma3d.png → 404 Not Found
——因为 @/ 是 Webpack 别名（alias），仅在 import 或 require() 调用时由构建工具解析，不会在模板中自动生效。
✅ 正确做法：动态绑定 + require()
你需要将 project.image 从字符串改为 经 require() 处理后的模块引用。修改 data() 中的项目数组：
data() {
return {
projects: [
// ... 前三个远程图片项目保持不变（它们是有效 URL，可直接使用）
{
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') // ✅ 正确：require 返回真实路径
},
{
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') // ✅ 同上
}
]
}
}
同时确保 <v-img></v-img> 绑定方式不变（:src="project.image" 已正确使用响应式绑定）：
<v-img class="align-end" width="200" :src="project.image"></v-img>
⚠️ 替代方案：使用 public/ 目录（适合静态资源）
若你希望避免 require()、支持更灵活的动态拼接（如 :src="/images/${name}.png"），请将图片移至 public/images/，并直接使用绝对路径（以 / 开头）：
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 将
src/assets/images/figma3d.png复制到public/images/figma3d.png - 在数据中改为字符串路径：
image: '/images/figma3d.png' // ✅ 不需 require，Webpack 不处理，直接映射到 dist/
- 模板中仍用
:src="project.image"即可。
? 关键区别回顾：
src/assets/→ 需require()/import→ 支持哈希指纹、压缩、编译时校验public/→ 直接复制到dist/→ 路径固定、无构建优化、适合大量静态资源
❌ 常见误区排查
-
不要在模板中写
:src="'@/assets/...'"：单引号包裹使@/成为纯文本，Webpack 完全忽略； -
不要混用
v-img与未处理路径：<v-img :src="xxx"></v-img>中的xxx必须是已解析的 URL 字符串（require()返回值或public/绝对路径）； -
检查控制台 Network 面板：确认请求路径是否含
@/（错误）或/images/（正确）； -
验证文件存在性：确保
src/assets/images/下文件名大小写、扩展名（.pngvs.PNG）与代码完全一致（尤其在 Linux/macOS 环境下敏感）。
✅ 最终效果验证
修改后重新运行项目，Network 面板应显示类似请求：GET http://localhost:8082/img/figma3d.abc123.png（Webpack 处理后带 hash 的路径）
或GET http://localhost:8082/images/figma3d.png（public/ 目录直出）
至此，<v-img></v-img> 将正常渲染本地图片——既符合 Vue CLI 工程化规范，又规避了浏览器安全限制与路径解析失效问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
