齐枭飞 Vue系列--vue的图片路径，和背景图片路径打包后错误解决

老实的按照官网提供的，搭建的了 webpack+vue+vuex+vue-router，，因为是自己搭建的，所以踩了不少坑，一般问题百度都有，这个背景图片的问题，查了很久才解决。

1、找到 config->index.js里面，如下修改

2、找到 build->utils.js,在里面加入一句publicPath:’…/…/’,

[图片上传中…(image-7129b4-1523012561213-1)]

配置修改完成，接下来，使用有两种方式，这里一般和文件结构有关，下面是我的文件结构下的使用

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" /><br><img src=``"static/img/loginback.png" class``=``"test-img" />

css使用图片

background: url(``'../../static/img/loginback.png'``) no-repeat top left ;

齐枭飞 Vue系列--vue的图片路径，和背景图片路径打包后错误解决相关推荐

VUE系列-Vue中组件的应用(三)
大家好,我是前端岚枫,一枚二线城市的程序媛,上篇主要跟分享了<VUE系列-Vue核心应用(二)>,今天主要跟大家分享我整理的vue的组件相关的,主要包括组件声明.组件种类.组件间的几种 ...
[Vue warn]: Failed to mount component: template or render function not defined. 错误解决方法
[Vue warn]: Failed to mount component: template or render function not defined. 错误解决方法参考文章: (1)[Vue ...
背景图片固定（背景图片附着）（HTML、CSS）
背景图片固定(背景图片附着)(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta ...
C# 后台背景图片拼接图片与文字，文字图片生成与背景图片合成
标题C# 后台背景图片拼接图片与文字,文字图片生成与背景图片合成最近有个需求是将生成的邀请码与背景图片合成成为新的图片,查找了一些资料后又整理了一遍,查到了一个群主的帖子,虽然代码略微有点问题,地 ...
怎么修改计算机密码界面的背景,怎么修改Win7登录界面背景图片(欢迎界面背景图片)?...
怎么修改Win7登录界面背景图片(欢迎界面背景图片)?之前自己曾设置过,当时没有想到分享给朋友们!现在把这个帖子补上,先来看下效果图片,笔者将其换成了苹果Mac的登陆界面!只要您能从中获得乐趣,其实这 ...
CSS学习记录3.2/设置标签的背景颜色/控制背景图片的平铺方式/控制背景图片的位置/背景图片关联方式/背景图片和插入图片的区别/捕鱼达人背景练习/精灵图
设置标签的背景颜色: CSS中的background-color:属性,就是专门用来设置标签.bc+table 设置背景图片: CSS中的background-image: url( );的属性就是设 ...
CSS-Learning | background-image属性如何设置背景图片以及相关背景图片语法
背景图片设置背景图片只需设置background-image属性,接受url()函数式表示法,可以使用相对路径,如url(img/cat.jpg).浏览器此时会在保存当前样式表的目录的img子目标中 ...
android取消背景图片,android 设置背景图片
>**无背景的代码稍显枯燥啊少年: vs2015,vs2019等再拓展里下载:** ! import java.awt.FlowLayout; import javax.swing.Image ...
background图片叠加_CSS 背景图片重叠铺满整个层
background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示 ...

齐枭飞 Vue系列--vue的图片路径，和背景图片路径打包后错误解决

齐枭飞 Vue系列--vue的图片路径，和背景图片路径打包后错误解决相关推荐

最新文章

热门文章