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,背景颜色 {">说明:参数取值和颜色属性一样 ...
随机推荐
- ERP项目实施记录02
今天去第三方公司(B公司)考察: 公司成立:2011年12月 注册地:深圳 深圳:2~3个业务员 东莞:5个开发人员,据说也是实施人员 全功能者:BOSS A公司因战略调整,要将业务"下放& ...
- [No0000FD]C# 正则表达式
正则表达式 是一种匹配输入文本的模式..Net 框架提供了允许这种匹配的正则表达式引擎.模式由一个或多个字符.运算符和结构组成. 定义正则表达式 下面列出了用于定义正则表达式的各种类别的字符.运算符和 ...
- 访问Google的办法
访问Google的办法 http://www.liu16.com/g.html http://ac.scmor.com/ https://www.elastic.co/guide/en/elastic ...
- c#如何调用另外一个项目的类
添加引用即可. 参考资料: https://zhidao.baidu.com/question/241402877.html http://blog.csdn.net/a1027/article/de ...
- A crawler that sent a DELETE request to every resource it encountered
RESTful Web APIs_2013 The crawler simulates a very curious but not very picky human. Give it a URL t ...
- 20165225《Java程序设计》第九周学习总结
20165225<Java程序设计>第九周学习总结 1.视频与课本中的学习: 第十三章学习总结 URL类 URL对象包含三部分信息:协议.地址和资源 创建URL对象两种方法: public ...
- Celery 出现Process 'Worker-5' pid:5608 exited with 'exitcode 1' 问题
起初我以为是进程PID文件问题,从新删除问题并未解决. 现已解决办法公布如下: pip install --upgrade billiard 原因:依赖的billiard库版本有点低,更新即可
- Dubbo服务化框架使用整理
一.垂直应用架构拆分 在应用架构的演进过程中,垂直应用架构因为开发便捷,学习成本低,对于实现业务功能的增删改查提供了高效的开发支持,有利于前期业务高速发展的的快速实现.但是随着系统业务功能的不断扩展和 ...
- Servlet----------Servlet 概述
1.什么是Servlet Servle t是Java Web 的三大组件之一,它属于动态资源.Servlet 的作用是处理请求,服务器会把接收到时的请求交给 Servlet 来处理,在Servlet中 ...
- 【托业】【全真题库】TEST01-03-阅读题
[托业][全真题库]TEST01-03-阅读题