vue-cli3或者4中如何正确的使用public中的图片

标题说的很清楚了,就是要使用public中的图片
那么为什么要把图片放到public中呢,其实官网上面也说了,要么是需要动态引入非常多的图片,特别是小图标,如果放在assert中的话,会被webpack处理,很可能被打成base64混合到app.js里面
这样就导致这个js文件比较大,
因为动态引入,肯定是有很多不需要的图片,这样就有可能导致浪费,多下载了不需要的图片,所以就有把图片放public这么一说。
具体做法呢其实参照官方来就很靠谱,具体来贴下我自己的配置
publicPath: process.env.NODE_ENV === "production" ? "/xxx/xx/xxx/xx/x/" : "/", //说明一下啊,这里的xx/xx/xx/就是你实际部署的路径,比如,我的部署路径是www.baidu.com/test/k1/k2/index.html ,那么这里就写 /test/k1/k2/ assetsDir: "static", 然后,具体使用中就如下 // 比如,xx组件 data() { return { publicPath: process.env.BASE_URL }; }, computed: { calcUrl() { let dataState = this.dataStatus, fruitNum = this.fruitNum; return this.publicPath + "fruit/red.png"; } },
这样就好了,做起来呢也不难是吧,之前在public哪里走了弯路,以为只需要写最后一个文件夹的名字就好,现在想想太傻逼了,哈哈。
好了,到此结束,如果有任何疑问或者错误,反应留言反馈!!

posted @   风意不止  阅读(997)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
历史上的今天:
2020-12-01 fastadmin表单去掉各种按钮---fastadmin去掉右上角的搜索按钮及其导出等
点击右上角即可分享
微信分享提示