最近在研究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. centos 7 删除yum安装的openjdk

    # java -version # rpm -qa | grep java rpm -e --nodeps (rpm -qa的结果们) # java -version

  2. GDB常用调试命令以及多进程多线程调试

    http://blog.csdn.net/freeelinux/article/details/53700266 一:普通命令   1.list命令 list  linenum      显示程序第l ...

  3. vmware虚拟机与主机共享文件

    参考: http://blog.csdn.net/season_hangzhou/article/details/8162704 前言:本文提供的方法是吧windows主机上的文件夹共享给vmware ...

  4. MySQL 安装 用户管理 常用命令

    MySQL目录 数据库概览   数据库介绍 Why Choose MySQL MySQL的前世今生 MySQL的安装   Windows安装MySQL5.721 installer版 Windows安 ...

  5. 对于adc dac使用细节

    1. 要更具内部线路图决定引脚分配,adc和dac绑定在一个线路上,所以设计的时候最好尽量间隔三个引脚以上,如果adc必须放到一起,请使用开关控制,但是dma等可能不能正常工作. 2.dac输出内部缓 ...

  6. Hive中的order by、sort by、distribute by、cluster by解释及测试

    结论: order by:全局排序,这也是4种排序手段中唯一一个能在终端输出中看出全局排序的方法,只有一个reduce,可能造成renduce任务时间过长,在严格模式下,要求必须具备limit子句. ...

  7. spark运行wordcount程序

    首先提一下spark rdd的五大核心特性: 1.rdd由一系列的分片组成,比如说128m一片,类似于hadoop中的split2.每一个分区都有一个函数去迭代/运行/计算3.一系列的依赖,比如:rd ...

  8. iOS ARC编译器规则和内存管理规则

    iOS 开发当中,自动引用计数已经是标准的内存管理方案.除了一些老旧的项目或者库已经没有人使用手动来管理内存了吧. ARC无疑是把开发者从繁琐的保留/释放引用对象逻辑中解脱出来.但这并不是万事大吉了, ...

  9. Copycat - configure

    Copycat server之间的configure是如何,何时被同步的?   大家可以看到,只有leader可以同步配置   1. 显式的调用LeaderState.configure Leader ...

  10. LeetCode 944 Delete Columns to Make Sorted 解题报告

    题目要求 We are given an array A of N lowercase letter strings, all of the same length. Now, we may choo ...