最近在研究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. 在 .NET Framework Data Provider for Microsoft SQL Server Compact 3.5 中发生错误

    32位机器删除 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\version\DataProviders\{7C602B5B-ACCB-4acd ...

  2. Codeforces 758C-Unfair Poll

    Unfair Poll time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...

  3. Ubuntu-18.04设置开机启动脚本

    参考:https://www.cnblogs.com/defifind/p/9285456.html    http://www.cnblogs.com/airdot/p/9688530.html s ...

  4. PL-SLAM

    双目 1.PL-SLAM: a Stereo SLAM System through the Combination of Points and Line Segments ubuntu14.04配置 ...

  5. 用CSS画基本图形

    用CSS画基本图形 1.正方形 代码如下: #square { width: 100px; height: 100px; background: red; } 2.长方形 代码如下:   #recta ...

  6. Oracle分析函数大全

    分析函数又叫开窗函数,OLAP函数等,因为有人问我用过开窗函数没,呵,什么是开窗函数,从来没听过,难道是分析函数么.哈哈,最后还真是分析函数哦!用过的东西别名也应该知道,赶上这么个事,就剽窃一眼Ora ...

  7. spark运行wordcount程序

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

  8. MyEvent.SetEvent; // 同步信号置位

    MyEvent.SetEvent;   //  同步信号置位 TSimpleEvent.Create = TEvent.Create(nil, True, False, nil)           ...

  9. odoo权限管理

    Odoo的权限的核心是权限组(res_groups).对每个权限组,可以设置权限组的菜单表示,对象表示,记录规则表示,字段表示. 1.菜单/对象级别 设置哪些人可以访问哪些菜单/对象,对象的访问权限包 ...

  10. Delphi 打开网址

    1. 通过iexplore.exe打开:ShellExecute(0, 'open', 'iexplore.exe', PChar('http://www.100xuekao.com'), '', S ...