最近在研究vue,老实的按照官网提供的,搭建的了 webpack+vue+vuex+vue-router,,因为是自己搭建的,所以踩了不少坑,一般问题百度都有,这个背景图片的问题,查了很久才解决。

1、找到 config->index.js里面,如下修改

2、找到 build->utils.js,在里面加入一句publicPath:'../../',

配置修改完成,接下来,使用有两种方式,这里一般和文件结构有关,下面是我的文件结构下的使用

1、图片资源放在 assets->img文件夹下面

img标签引入图片

<img src="../assets/img/loginback.png" class="test-img" />

 css使用图片 

background: url('../assets/img/loginback.png') no-repeat top left ;

  2、图片资源放在static->img文件夹下面

img标签引入图片

<img src="../../static/img/loginback.png" class="test-img" />
<img src="static/img/loginback.png" class="test-img" />

  css使用图片

background: url('../../static/img/loginback.png') no-repeat top left ;

  

vue的图片路径,和背景图片路径打包后错误解决的更多相关文章

  1. [整理] webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

    webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用 https://www.cnblogs.com/moqiutao/p/7496718.html

  2. vue之webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

    问题描述 一般情况下,通过webpack+vue-cli默认打包的css.js等资源,路径都是绝对的 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径 ...

  3. webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  4. php 合并图片 (将活动背景图片和动态二维码图片合成一张图片)

    <?php //案例一:将活动背景图片和动态二维码图片合成一张图片 //图片一 $path_1 = './background.png'; //图片二 $path_2 = './FU0851_2 ...

  5. CSS - 插入图片img和背景图片

    1. img插入图片,用的最多,比如产品展示类 .section img { width: 200px;/* 插入图片更改大小 width 和 height */ height: 210px; mar ...

  6. Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)

    最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...

  7. CSS背景图片

    1.背景图片插入 代码格式:background-image:url(): 括号内填写图片路径 2.背景图片设置大小 代码格式:background-size:宽.高 3.背景图片设置不平铺 代码格式 ...

  8. HTML BODY 背景图片

    内嵌: background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径)  no-repeat center;/*不重复背景 ...

  9. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

随机推荐

  1. 170825、SolrCloud 分布式集群部署步骤

    安装软件包准备 apache-tomcat-7.0.54 jdk1.7 solr-4.8.1 zookeeper-3.4.5 注:以上软件都是基于 Linux 环境的 64位 软件,以上软件请到各自的 ...

  2. mysql命令大全用户管理相关命令

        1.登陆 mysql>mysql -uJDev -p 2.用户管理 mysql>use mysql; 3.查看有哪些登陆用户 mysql> select host,user, ...

  3. 电子产品使用感受之--Mac Mini 买了之后有什么用?-- 开发啊!

    2019.01.29 更新 Mac Mini 2018这么强劲的性能,不用来做点儿什么真是可惜了. 如果只是用来看看Youtube视频,打开网页看看twitter什么的,那可真是巨大的浪费了. 因为这 ...

  4. 树剖+线段树||树链剖分||BZOJ2238||Mst

    题面:https://www.lydsy.com/JudgeOnline/problem.php?id=2238 思路:先求个最小生成树,然后就对最小生成树上的边做树剖,依次对非树边进行处理,维护非树 ...

  5. 解决webstorm拉取Vue项目时卡顿,及内存爆满问题

    最近在拉取Vue项目时总是会出现webstorm内存瞬间爆满,导致webstorm卡死,而且,有时在下载完node_modues后webstorm一直处于updating中,为此在网上找了很多方法结果 ...

  6. .net webservice的get支持,

    默认创建的webservices.asmx是不支持get的, 如 [WebMethod] public string HelloWorld() { return "Hello World&q ...

  7. C和C指针小记(十二)-函数的可变参数表

    1.可变参数表是通过宏实现的 宏定义于stdarg.h头文件,它是标准库的一部分.这个头文件声明了一个类型var_list和三个宏--va_start.va_arg.va_end. 我们可以声明一个类 ...

  8. [development][PCRE] old PCRE

    介绍, man手册 txt版 http://www.pcre.org/original/pcre.txt html版 http://www.pcre.org/original/doc/html/pcr ...

  9. 转:环绕通知返回值 object 类型

    遇到 AOP 环绕通知报错  “return value from advice does not match primitive return type for: public boolean” 百 ...

  10. 第三方python 加密库 --- cryptography

    1,安装依赖 pip install cryptography 2,生成秘钥 from cryptography.fernet import Fernet #秘钥#随机生成秘钥 cipher_key ...