Vue打包项目图片等静态资源的处理
2023-09-11 14:19:55 时间
项目打包,默认是打包在根目录下面的。当然我们可以通过设置,打包到任意子目录中去。 但是,当项目中引入资源的,比如:引入图片资源、js资源、或者字体图标之类的。那么可能在这个中间又会踩坑。
1、在vue文件引入图片
例如,我们将一张图片放到资源目录 /static/image/lyf.jpg
我们在 vue
文件中用下面的代码来使用这张图片。
<img src="static/image/lyf.jpg" alt="">
注意,最前面不要加 /
,如果是这样操作的话,会变成相对根目录调用图片。如果你的项目要打包到子目录的话,这样做就会出现问题。
2、在 css 文件中,引用图片的处理
还是上面那张图片,我们需要在 css
中来引用,如何来写呢?
.love {
background-image: url('../static/image/lyf.jpg');
}
这里为什么要加上 ../
呢?
如果是最终打包到根目录的话,可以使用 /
这种路径。这个是完全可以理解的。
但,如果是打包到子目录,我们必须看下生成的最终路径:
├── index.html
└── static
├── css
│ └── app.a7a745952a8ca7f8c9413d53b431b8c8.css
├── image
│ └── lyf.jpg
├── img
│ └── lyf.9125a01.jpg
└── js
├── app.39ccc604caeb34166b49.js
├── manifest.b1ad113c36e077a9b54d.js
└── vendor.0b8d67613e49db91b787.js
如上,我们可以看到这个 css
相对 图片
的路径的地址。
你要疑问了,这样的相对路径,我们可以使用 ../image/lyf.jpg
来进行调用呀。嗯,看上去可以,但是,如果是这样的话,在开发模式中又会出错了。
所以,还是要用 '../static/image/lyf.jpg'
这样的路径方式来调用图片。
相关文章
- Vue -> 解决 vue-ueditor-wrap 不能显示的问题
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- vue编程式路由实现新窗口打开
- vue.js - 解决vue-cli打包后自动压缩代码
- vue项目如何实现返回上一页
- [Vue @Component] Simplify Vue Components with vue-class-component
- vue 3.2.6:用better-scroll实现上拉加载/下拉刷新/滚动翻页(better-scroll@2.4.2)
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- vue-cli是什么?和 webpack是什么关系?
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue项目打包后打开空白解决办法
- vue修改innerHTML不更新
- Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)
- 前端框架Vue------>第一天学习、Vue学习的路径、Vue官网(1)
- Vue、Vuejs从入门到精通 | vue-router详解
- 013:vue+openlayers加载引用maptiler地图,多种展现形式
- 谈谈Vue项目打包的方式
- 基于Java+SpringBoot+Vue+uniapp前后端分离图书阅读系统设计与实现
- ASP.NET Core微服务(五)——【vue脚手架解析接口】
- Vue打包并发布项目
- 如何将vue项目打包为.apk文件
- Vue 组件的定义、组件的使用、什么是路由、路由的定义和使用、nrm的安装使用