Vue打包项目图片等静态资源的处理
2018-04-22 00:16
1111 查看
项目打包,默认是打包在根目录下面的。当然我们可以通过设置,打包到任意子目录中去。 但是,当项目中引入资源的,比如:引入图片资源、js资源、或者字体图标之类的。那么可能在这个中间又会踩坑。
1、在vue文件引入图片
例如,我们将一张图片放到资源目录
注意,最前面不要加
2、在 css 文件中,引用图片的处理
还是上面那张图片,我们需要在
这里为什么要加上
如果是最终打包到根目录的话,可以使用
但,如果是打包到子目录,我们必须看下生成的最终路径:
如上,我们可以看到这个
你要疑问了,这样的相对路径,我们可以使用
所以,还是要用
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项目使用webpack打包时纯静态资源的处理
- 静态库资源文件、xib、图片打包处理,编译生成的静态库.a包文件太大缩小解决方法
- vue打包之后静态资源图片失效问题
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十二)打包项目图片等资源的处理
- 用webpack打包vue项目后,静态资源路径失效问题
- vue项目打包后资源相对引用路径的和背景图片路径问题
- Vue2+VueRouter2+Webpack+Axios 构建项目实战(十一)打包项目图片等资源的处理
- vue之项目静态资源打包
- 解决vue打包之后静态资源图片失效的问题
- vue-cli与webpack处理静态资源的方法及webpack打包的坑
- vue打包项目后正确显示图片
- TexturePacker 图片打包工具讲解与使用并且批处理打多包以及资源加密
- vue完成项目后,打包成静态文件的方法
- TexturePacker 图片打包工具讲解与使用并且批处理打多包以及资源加密
- iOS静态库中打包图片资源
- 详解vue静态资源打包中的坑与解决方案
- TexturePacker 图片打包工具讲解与使用并且批处理打多包以及资源加密
- vue 项目打包时样式及背景图片路径找不到
- vue完成项目后,如何打包成静态文件
- vue打包静态资源路径不正确的解决办法