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,背景颜色 {">说明:参数取值和颜色属性一样 ...
随机推荐
- myEclipse异常:Subversion Native Library Not Available
参考文档:https://blog.csdn.net/zp357252539/article/details/44880319 Subversion Native Library Not Availa ...
- MyEclipse中同时启动两个tomcat
开发的时候,有些时候需要同时启动两个项目.首先配置tomcat,方法如下:(转载自:http://bendan123812.iteye.com/blog/1716789) 一.把Tomcat复制一份并 ...
- checkbox做全部选中,全部取消效果
批量选中.取消多个checkbox的用法很简单,这个功能也很常用.这里做个总结. 在HTML中的写法: <div id="ftpFileDownTr"> <but ...
- svn异常:subversion.javahl.ClientException
使用svn时出现异常: INFO [org.netbeans.modules.subversion]: org.apache.subversion.javahl.ClientException: Pr ...
- [No0000EB]C# 数组(Array)
数组是一个存储相同类型元素的固定大小的顺序集合.数组是用来存储数据的集合,通常认为数组是一个同一类型变量的集合. 声明数组变量并不是声明 number0.number1.....number99 一个 ...
- 字母算术的python算法
据说Google出过一道题目:WWWDOT – GOOGLE = DOTCOM. 其中每个字母代表一个数字,数字不能重复,而且最高位的数字不能为0. 像这样的谜题被称为cryptarithms或者字母 ...
- 解决vshost32.exe已停止工作
VS2015,搞二次开发遇到这个问题,这个真的很坑,都没法找到问题.然后百度到答案,将调试中的"启用Visual Studio 承载进程"的√去掉: 一开始感觉是内存的问题,后来又 ...
- Page10:Lyapunov稳定概念及判定定理[Linear System Theory]
内容包含连续和离散系统的Lyapunov稳定概念及其各种判别定理
- hdfs mapreduce hbase
参考资料:http://www.cnblogs.com/sharpxiajun/p/5585613.html 大数据时代的数据量是超大规模的,传统的关系数据库已经很难存储和管理这些数据了,为了存储海量 ...
- linux之无公网ip的自动登录
场景 对于有公网ip的链接方式我们都比较清楚了,但是有些服务器不允许直接登录或者没有直接登录的公网ip,所以只能通过一个可以直接登录的堡垒机跳转.这时需要你手动去敲ssh远程链接命令(例如:ssh r ...