项目打包,默认是打包在根目录下面的。当然我们可以通过设置,打包到任意子目录中去。 但是,当项目中引入资源的,比如:引入图片资源、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打包项目图片等静态资源的处理的更多相关文章

  1. webpack配置:打包第三方类库、第三方类库抽离、watch自动打包、集中拷贝静态资源

    一.打包第三方类库 下面说2种方法: 第一种: 1.引入jQuery,首先安装: npm install --save-dev jquery 2.安装好后,在index.js中引入,用jquery语法 ...

  2. SpringMVC中css,js,图片等静态资源被拦截的解决办法

    一.静态资源的存放路径 css,js,图片等静态资源存放在项目的路径必须为 二.html.jsp导入静态资源文件 html.jsp页面中的导入静态资源文件: js: css: 图片: 二.web.xm ...

  3. web项目中url-pattern改成'/'后,js、css、图片等静态资源(404)无法访问问题解决办法

    感谢http://blog.csdn.net/this_super/article/details/7884383的文章 1.增加静态资源url映射 如Tomcat, Jetty, JBoss, Gl ...

  4. web项目中url-pattern改成'/'后,js、css、图片等静态资源(404)无法访问问题解决办法

    感谢http://blog.csdn.net/this_super/article/details/7884383的文章 1.增加静态资源url映射 如Tomcat, Jetty, JBoss, Gl ...

  5. Django + Vue cli 3.0 访问静态资源问题

    [问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...

  6. 关于linux下部署JavaWeb项目,nginx负责静态资源访问,tomcat负责处理动态请求的nginx配置

    1.项目的运行环境 linux版本 [root@localhost ~]# cat /proc/version Linux version -.el6.x86_64 (mockbuild@x86-.b ...

  7. eclipse使用maven打包的时候发现静态资源没包含进去

    今天在打包的时候,发现传上去的包里没有配置静态资源. (右键项目--->Run As ---> 8 Maven install  ) 后来发现是因为在pom.xml里没有配置打包静态资源的 ...

  8. 【问题管理】-- Tomcat8部署项目加载静态资源html页面编码错误

    1.问题背景及解决方式 最近在回顾Tomcat部署Web项目,自己简单地从Tomcat的下载安装及配置server.xml文件入手,学习Tomcat的项目部署,在自己使用IDEA创建了一个简单地web ...

  9. vue打包后找不到资源路径问题

    问题描述: 使用webpack打包vue项目后,前后端联调无法找到资源 解决方案: 一. 改为相对路径,去除axios中地址的第一个“/” onProxyReq: function (proxyReq ...

随机推荐

  1. 五:ZooKeeper的集群命令客户端的链接和命令操作的使用

    一:zookeeper客户端链接[1]进入zookeeper的安装目录的bin目录下         # cd /opt/zookeeper/bin[2]敲击链接客户端的命令(zkCli.sh)    ...

  2. 带有定位当前位置的百度地图web api 前端代码

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta name="viewport& ...

  3. 【ASP.NET MVC】提高页面加载速度:脚本优化

    在这里我们说一下脚本优化的三个方法: 一.在我们做Web开发的时候,当我们引用Js文件的时候,我们一般会将js文件放在文档的head标签中,这时当页面加载的时候,浏览器会按着由上到下的顺序,当浏览器遇 ...

  4. 转型(java)(.net)

    /** * 父类 */ class Animal { public void eat() { //输出 父类吃.... } } class Bird extends Animal { public v ...

  5. upm配置文件

    组件配置说明 Ø 配置文件规范 Ø 组件分为公共组件和私有组件,分别在public段和private段,如下所示. <?xml version="1.0" encoding= ...

  6. struts2核心配置之Result

    result作用:在struts.xml中,使用<result>元素配置result逻辑视图和物理视图之间的映射 元素属性 属性 说明 是否必须 name 指定逻辑视图的名称(Action ...

  7. 1. Maven - 开始

    今天开始记录Maven的学习过程. ☞ 相关明细 操作系统:win7 参考书籍:<maven-definitive-guide_zh>(Maven权威指南) maven版本:3.3.3 ☞ ...

  8. Loj#6434「PKUSC2018」主斗地(搜索)

    题面 Loj 题解 细节比较多的搜索题. 首先现将牌型暴力枚举出来,大概是\(3^{16}\)吧. 然后再看能打什么,简化后无非就三种决策:单牌,\(3+x\)和\(4+x\). 枚举网友打了几张\( ...

  9. 洛谷——P2813 母舰

    P2813 母舰 题目背景 广东汕头聿怀初中 Train#3 Problem 1 (有没有红警既视感~) 题目描述 在小A的星际大战游戏中,一艘强力的母舰往往决定了一场战争的胜负.一艘母舰的攻击力是普 ...

  10. oracle中 char,varchar,varchar2的区别

    区别:      1. CHAR的长度是固定的,而VARCHAR2的长度是可以变化的, 比如,存储字符串“abc",对于CHAR (20),表示你存储的字符将占20个字节(包括17个空字符) ...