vue的图片路径,和背景图片路径打包后错误解决
最近在研究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的图片路径,和背景图片路径打包后错误解决的更多相关文章
- [整理] webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用
webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用 https://www.cnblogs.com/moqiutao/p/7496718.html
- vue之webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用
问题描述 一般情况下,通过webpack+vue-cli默认打包的css.js等资源,路径都是绝对的 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径 ...
- webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- php 合并图片 (将活动背景图片和动态二维码图片合成一张图片)
<?php //案例一:将活动背景图片和动态二维码图片合成一张图片 //图片一 $path_1 = './background.png'; //图片二 $path_2 = './FU0851_2 ...
- CSS - 插入图片img和背景图片
1. img插入图片,用的最多,比如产品展示类 .section img { width: 200px;/* 插入图片更改大小 width 和 height */ height: 210px; mar ...
- Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)
最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...
- CSS背景图片
1.背景图片插入 代码格式:background-image:url(): 括号内填写图片路径 2.背景图片设置大小 代码格式:background-size:宽.高 3.背景图片设置不平铺 代码格式 ...
- HTML BODY 背景图片
内嵌: background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景 ...
- css网页中设置背景图片的方法详解
在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...
随机推荐
- scala 可变集合与内存清理的关系
留坑待填 使用scala.collection.mutable._期间,发现了当程序运行内存开销较多时,使用系统工具进行内存清理,然后程序报出了变量找不到.内存无法访问.数组访问越界,堆栈溢出等多种错 ...
- Django----djagorest-framwork源码剖析
restful(表者征状态转移,面向资源编程)------------------------------------------->约定 从资源的角度审视整个网络,将分布在网络中某个节点的资源 ...
- db2 应用的最常见状态(转)
db2 的应用最常见的状态为UOW Executing, UOW Waiting, Connect Completed等,这里做一个简单的介绍. UOW全称是Unit Of Work, 可以认为是事 ...
- Python学习笔记之--我又开始学习Python了(随时更新)
2019.02.09 更新 Python 学习计划已经开始几天了,跟着一本叫<Django for beginner>的书籍在学习用Django搭建自己的第一个网站,目前已经进行到第三章, ...
- MySQL 安装 用户管理 常用命令
MySQL目录 数据库概览 数据库介绍 Why Choose MySQL MySQL的前世今生 MySQL的安装 Windows安装MySQL5.721 installer版 Windows安 ...
- 2017年蓝桥杯省赛A组c++第7题(正则问题)
/* 描述:正则问题 考虑一种简单的正则表达式: 只由 x ( ) | 组成的正则表达式. 小明想求出这个正则表达式能接受的最长字符串的长度. 例如 ((xx|xxx)x|(x|xx))xx 能接受的 ...
- Java 输入/输出——Java虚拟机读写其它进程的数据
使用 Runtime对象的exec()方法可以运行平台上的其它程序,该方法产生一个Process对象,Process对象代表由该Java程序启动的子进程.Process类提供了如下三个方法,用于让程序 ...
- 根据xml配置使用反射动态生成对象
web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="htt ...
- js判断开始时间不能小于结束时间
function validTime(startTime,endTime){ var arr1 = startTime.split("-"); var arr2 = e ...
- nginx 、springMvc(非分布式)相应的限流、消峰
互联网服务赖以生存的根本是流量, 产品和运营会经常通过各种方式来为应用倒流,比如淘宝的双十一等,如何让系统在处理高并发的同时还是保证自身系统的稳定, 通常在最短时间内提高并发的做法就是加机器, 但是如 ...