Vuetify 的 组件无法显示 src/assets/ 下的本地图片，根本原因在于 Vue CLI（Webpack）不会自动解析模板中字符串形式的路径（如 "@/assets/images/figma3d.png"），必须通过模块化导入（require() 或 import）让 Webpack 处理并生成有效 URL。
vuetify 的 `
在你提供的代码中，projects 数组里最后两个项目的 image 字段直接写为字符串 "@/assets/images/figma3d.png" 和 "@/assets/images/covid_tracker.png"：
{
name: "3D Demo 1",
image: "@/assets/images/figma3d.png", // ❌ 错误：纯字符串，Webpack 不处理
},
{
name: "Covid Tracker",
image: "@/assets/images/covid_tracker.png", // ❌ 同样无效
}
浏览器最终发起请求：GET http://localhost:8082/@/assets/images/figma3d.png —— 这是一个404 路径错误，因为 @/ 是 Webpack 别名（仅在 JS 模块上下文中生效），不能直接用于 HTML 模板的 :src 绑定中。Vue 模板中的 :src="xxx" 是运行时绑定，若 xxx 是未处理的字符串，它会被原样当作相对 URL 解析，而 @/ 并非真实文件路径。
✅ 正确做法是：在 data() 或 computed 中，用 require() 动态导入图片，生成 Webpack 处理后的有效资源路径。
✅ 推荐解决方案：使用 require() 在数据层预处理路径
修改 <script></script> 部分，将 image 字段从字符串改为 require() 调用：
<script>
export default {
name: "Projects",
data() {
return {
projects: [
// 前三个远程图片保持不变（它们已是有效 URL）
{
name: "Twitch24",
image: "https://new-thefonso.vercel.app/img/portfolio/fullsize/twitch24.png",
// ... 其他字段
},
// 最后两个本地图片 → 改为 require
{
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"), // ✅ 正确：Webpack 解析并返回 public 路径
},
{
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"), // ✅ 同上
},
],
};
},
};
</script>
此时 <v-img :src="project.image"></v-img> 绑定的是一个由 Webpack 生成的真实路径（如 /img/figma3d.abc123.png），可被浏览器正常加载。
⚠️ 注意事项与避坑指南
不要在模板中写
:src="require(...)"：<v-img :src="require('@/assets/...')"></v-img>在 Vue 2 中可能偶然工作，但在 Vue 3 + Vite 或严格模式下会报错（require is not defined）。所有require()必须出现在 JS 逻辑中（data/computed/methods）。
vue-composition-api-best-practicesVue 3 组合式 API 与
更多热门下载
更多相关下载
更多精品课程
相关推荐/热门推荐/最新课程更多最新文章
