vue3 public下引入图片路径打包后线上不显示问题解决

一、问题

javascript 复制代码
<img :src="'/public/lonold/8838ab7312c9689535d7acdd2a28007.png'" alt="图片" />

二、解决

需要使用 /lonold/8838ab7312c9689535d7acdd2a28007.png 作为路径,删除public即可

三、原因

在 Vue 项目中:

  • public/ 目录的文件 不会被 Webpack/Vite 进行打包或优化 ,它们会直接复制dist/ 目录中,保持原样。

  • 这意味着 public 目录中的图片 不会 被 Webpack 转换为模块化资源,也不会有哈希值处理。

当你打包项目时:

  • public/lonold/8838ab7312c9689535d7acdd2a28007.png 会被直接放到 dist/lonold/8838ab7312c9689535d7acdd2a28007.png不会放在 dist/public/
相关推荐
Mintopia6 分钟前
🌌 渲染的秘密花园:Three.js 中 WebGLRenderer 的魔法之旅与自定义 RenderPass 技巧
前端·javascript·three.js
海天胜景18 分钟前
vue3 el-table 列数据合计
前端·javascript·vue.js
征尘bjajmd19 分钟前
vue+element-ui实现主子表
javascript·vue.js·elementui
帧栈23 分钟前
开发避坑短篇(6):Vue+Element UI 深度选择器实现表单元素精准对齐的技术实践
vue.js·ui·elementui
哥本哈士奇24 分钟前
Web前端交互利用Python跟大模型操作
前端·python·交互
小毛驴85039 分钟前
典型的 Vue 3 项目目录结构详解
前端·javascript·vue.js
德育处主任40 分钟前
p5.js 四边形(quad)的基础用法
前端·数据可视化·canvas
半生过往1 小时前
Vue 项目动态接口获取翻译数据实现方案(前端处理语言翻译 vue-i18n)
前端·javascript·vue.js·i18n
德育处主任1 小时前
p5.js 入门:用 point () 绘制点的超简单教程
前端·javascript·canvas
yume_sibai1 小时前
Vue 插槽
前端·javascript·vue.js