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,背景颜色 {">说明:参数取值和颜色属性一样 ...
随机推荐
- node-sass 安装
设置 export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/" export SASS_BINARY_SI ...
- centos 7 删除yum安装的openjdk
# java -version # rpm -qa | grep java rpm -e --nodeps (rpm -qa的结果们) # java -version
- ROS中.launch文件的remap标签详解
https://www.cnblogs.com/LiuQiang921202/p/7679943.html
- 垃圾回收基本算法 内存管理 GC大统一理论
<垃圾收集> (豆瓣) https://book.douban.com/subject/1157908/ 第1章 简介1.1 内存分配的历史1.1.1 静态分配1.1.2 栈分配1.1.3 ...
- day0321正则表达式
一.正则表达式 1.定义一个规则,检测某一段字符串是否符合规则,将符合规则的字符匹配出来. 2.只和字符串相关 3.字符组 描述一个字符位置的内容 3.1 [012345]检测0,1,2,3,4 ...
- Excel--数据透视图
原文:https://ke.qq.com/course/289406 1.数据源注意项 2. 3.选中数据源操作 任意选中数据源表格中的单元格(有值得单元格),插入数据透视表 默认数据源区域就是整个表 ...
- vue的生命周期(lifecycle)
这边转载一篇文章,个人认为写的不错,代码举了个例子很生动. https://segmentfault.com/a/1190000010336178
- Orchard Core 中数据库使用postgresql-10
在配置好Startup.cs后,运行程序: 首先需要设置一些基本信息.这里我试着配置如下,数据库使用postgresql,连接字符串像这样: Host=192.168.0.111;UserName=u ...
- 洛谷P4570 [BJWC2011]元素 线性基
正解:线性基+贪心 解题报告: 传送门! 这题其实没什么好写题解的,,,显然贪心一下尽量选魔力大的,不用证明趴挺显然的来着 所以就直接按魔力排个序,插入线性基里面,能插就加个贡献,over 放下代码趴 ...
- 关于XML文档的xmlns、xmlns:xsi和xsi:schemaLocation
https://yq.aliyun.com/articles/40353 ************************************* 摘要: 相信很多人和我一样,在编写Spring或者 ...