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,背景颜色 {">说明:参数取值和颜色属性一样 ...
随机推荐
- Tif文件合并类
using System; using System.Collections; using System.Collections.Generic; using System.Drawing; usin ...
- 洛谷P1216 数字三角形【dp】
题目:https://www.luogu.org/problemnew/show/P1216 题意: 给定一个三角形.从顶走到底,问路径上的数字之和最大是多少. 走的时候可以往左下(实际上纵坐标不变) ...
- TOP100summit2017:Riot Games 李仁杰——大数据落地要找到数据和经验的平衡点
壹佰案例:李仁杰老师您好,很荣幸您能参加第六届TOP100全球软件案例研究峰会,您在大数据和人工智能领域有非常丰富的经验,在这次大会上您将分享什么内容? 李仁杰:这次我主要分享的有两个方面. 一个 ...
- MySQL的sql_mode模式说明及设置
MySQL的sql_mode模式说明及设置 MySQL的sql_mode合理设置 sql_mode是个很容易被忽视的变量,默认值是空值,在这种设置下是可以允许一些非法操作的,比如允许一些非法数据的插入 ...
- [No0000122]Donet 中间语言,反编译 .net IL 指令速查
名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...
- tensorRT 使用tensorflow的pb问价构建推理
- Java8 in action
解决的问题: behavior parameterization,即可以把一段code,逻辑作为参数传入: 这样做的目的,当然为了代码抽象和重用,把变化的逻辑抽象出去: 在java中,如果要实现beh ...
- 转:el表达式获取map对象的内容 & js中使用el表达式 & js 中使用jstl 实现 session.removeattribute
原文链接: ①EL表达式取Map,List值的总结 ②在jsp中使用el表达式通过键获得后台的一个map<Long,String>的值 ③在javascript中使用el表达式(有图有真相 ...
- ORACLE managed file(OMF)
ORACLE managed file (OMF) Oracle自动创建和删除OMF文件 不用操心文件的命名约定 在手动管理文件时容易错误删除数据文件(OMF降低这种风险) Oracle自动删除不再需 ...
- Qt Multimedia 模块类如何使用?(表格)
qt 多媒体模块介绍 类名 英文描述 中文描述 QAudioBuffer Represents a collection of audio samples with a specific format ...