Vue打包项目图片等静态资源的处理
项目打包,默认是打包在根目录下面的。当然我们可以通过设置,打包到任意子目录中去。 但是,当项目中引入资源的,比如:引入图片资源、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打包项目图片等静态资源的处理的更多相关文章
- webpack配置:打包第三方类库、第三方类库抽离、watch自动打包、集中拷贝静态资源
一.打包第三方类库 下面说2种方法: 第一种: 1.引入jQuery,首先安装: npm install --save-dev jquery 2.安装好后,在index.js中引入,用jquery语法 ...
- SpringMVC中css,js,图片等静态资源被拦截的解决办法
一.静态资源的存放路径 css,js,图片等静态资源存放在项目的路径必须为 二.html.jsp导入静态资源文件 html.jsp页面中的导入静态资源文件: js: css: 图片: 二.web.xm ...
- web项目中url-pattern改成'/'后,js、css、图片等静态资源(404)无法访问问题解决办法
感谢http://blog.csdn.net/this_super/article/details/7884383的文章 1.增加静态资源url映射 如Tomcat, Jetty, JBoss, Gl ...
- web项目中url-pattern改成'/'后,js、css、图片等静态资源(404)无法访问问题解决办法
感谢http://blog.csdn.net/this_super/article/details/7884383的文章 1.增加静态资源url映射 如Tomcat, Jetty, JBoss, Gl ...
- Django + Vue cli 3.0 访问静态资源问题
[问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...
- 关于linux下部署JavaWeb项目,nginx负责静态资源访问,tomcat负责处理动态请求的nginx配置
1.项目的运行环境 linux版本 [root@localhost ~]# cat /proc/version Linux version -.el6.x86_64 (mockbuild@x86-.b ...
- eclipse使用maven打包的时候发现静态资源没包含进去
今天在打包的时候,发现传上去的包里没有配置静态资源. (右键项目--->Run As ---> 8 Maven install ) 后来发现是因为在pom.xml里没有配置打包静态资源的 ...
- 【问题管理】-- Tomcat8部署项目加载静态资源html页面编码错误
1.问题背景及解决方式 最近在回顾Tomcat部署Web项目,自己简单地从Tomcat的下载安装及配置server.xml文件入手,学习Tomcat的项目部署,在自己使用IDEA创建了一个简单地web ...
- vue打包后找不到资源路径问题
问题描述: 使用webpack打包vue项目后,前后端联调无法找到资源 解决方案: 一. 改为相对路径,去除axios中地址的第一个“/” onProxyReq: function (proxyReq ...
随机推荐
- 五:ZooKeeper的集群命令客户端的链接和命令操作的使用
一:zookeeper客户端链接[1]进入zookeeper的安装目录的bin目录下 # cd /opt/zookeeper/bin[2]敲击链接客户端的命令(zkCli.sh) ...
- 带有定位当前位置的百度地图web api 前端代码
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta name="viewport& ...
- 【ASP.NET MVC】提高页面加载速度:脚本优化
在这里我们说一下脚本优化的三个方法: 一.在我们做Web开发的时候,当我们引用Js文件的时候,我们一般会将js文件放在文档的head标签中,这时当页面加载的时候,浏览器会按着由上到下的顺序,当浏览器遇 ...
- 转型(java)(.net)
/** * 父类 */ class Animal { public void eat() { //输出 父类吃.... } } class Bird extends Animal { public v ...
- upm配置文件
组件配置说明 Ø 配置文件规范 Ø 组件分为公共组件和私有组件,分别在public段和private段,如下所示. <?xml version="1.0" encoding= ...
- struts2核心配置之Result
result作用:在struts.xml中,使用<result>元素配置result逻辑视图和物理视图之间的映射 元素属性 属性 说明 是否必须 name 指定逻辑视图的名称(Action ...
- 1. Maven - 开始
今天开始记录Maven的学习过程. ☞ 相关明细 操作系统:win7 参考书籍:<maven-definitive-guide_zh>(Maven权威指南) maven版本:3.3.3 ☞ ...
- Loj#6434「PKUSC2018」主斗地(搜索)
题面 Loj 题解 细节比较多的搜索题. 首先现将牌型暴力枚举出来,大概是\(3^{16}\)吧. 然后再看能打什么,简化后无非就三种决策:单牌,\(3+x\)和\(4+x\). 枚举网友打了几张\( ...
- 洛谷——P2813 母舰
P2813 母舰 题目背景 广东汕头聿怀初中 Train#3 Problem 1 (有没有红警既视感~) 题目描述 在小A的星际大战游戏中,一艘强力的母舰往往决定了一场战争的胜负.一艘母舰的攻击力是普 ...
- oracle中 char,varchar,varchar2的区别
区别: 1. CHAR的长度是固定的,而VARCHAR2的长度是可以变化的, 比如,存储字符串“abc",对于CHAR (20),表示你存储的字符将占20个字节(包括17个空字符) ...