vue踩坑系列——backgroundImage路径问题

项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../这种形式

在打包build的设置路径assetsPublicPath: ‘./‘，然后那些没有转成base64的背景图都失效了，，路径。

处理方法：
使用require引入图片

img标签

<img :src="require('assets/img/header/search.png')">

背景图

<div :style="{backgroundImage:'url('+require('assets/img/common/bg.png')+')'}"></div><span :style="{backgroundImage:'url('+require('../../assets/image/accounts/dayily.png')+')'}"></span>

也可以下面这种方式去写：
在前端开发中，background-image属性非常常见，有很多时候需要使用内联样式来绑定此属性，但是在vue-cli项目中，如果如下面代码填写路径会找不到图片

使用require()方法，require()是node.js方法

感谢分享：https://blog.csdn.net/MoLvSHan/article/details/78204972
感谢分享：https://www.cnblogs.com/lanshengzhong/p/8010720.html

vue踩坑系列——backgroundImage路径问题相关推荐

python导入类有红线_python踩坑系列之导入包时下划红线及报错“No module named”问题...
python踩坑系列之导入包时下划红线及报错"No module named"问题使用pycharm编写Python时,自己写了一个包(commontool),在同级另一个路径下 ...
python代码下出现红线_python踩坑系列之导入包时下划红线及报错“No module named”问题...
python踩坑系列之导入包时下划红线及报错"No module named"问题使用pycharm编写Python时,自己写了一个包(commontool),在同级另一个路径下 ...
openlayers6 踩坑系列（三）绘制和编辑（矩形，圆，多边形，点，线）
重要:博客内使用地图全替换为WMap,想使用的请参考我这篇博客(WMap) 最近在做矢量图形这一块,发现圆形和多边形,都可以使用openlayers自带的Modify类进行编辑,然后随意放大缩小旋转, ...
【踩坑系列】mysql 修改root密码失败
[踩坑系列] mysql 修改root密码失败问题原因 mysql 修改root密码失败 ,主要是因为root的host不是localhost,是%的问题. 修改密码的步骤 -- 切换到 mysql ...
微信开发踩坑系列一之Native支付
微信开发踩坑系列一之Native支付 1.前言 1.1.文章说明 1.2.微信支付简介 1.3.项目技术栈 2.Native支付开发 2.1.官方描述 2.2.两种模式介绍 2.3.开发前准备工作 2 ...
Vue踩坑 npm ERR code ELIFECYCLE
Vue踩坑 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! supermall@0.1.0 serve: vue-cli-service serv ...
【踩坑系列】 SpringBoot ，SpringSecurity，activiti 项目无法正常跳转到登录界面
[踩坑系列] SpringBoot ,SpringSecurity,activiti 项目无法正常跳转到登录界面前言一直强制跳转到springSecurity 的默认的登录界面,无法正常跳转到自己 ...
Oracle Clob类型踩坑系列
Oracle Clob类型踩坑系列 1]存储过程中向Clob中插入值插入32767字节长度数据.无报错 Declarev_Clob Clob := '[32767长度字节数据]'; BeginIns ...
Vue 踩坑笔记: 引入 ElementUI 时打包失败修复记录(ERROR in ./node_modules/element-ui/lib/theme-chalk/index.css)
Vue 踩坑笔记: 引入 ElementUI 时打包失败修复记录(ERROR in ./node_modules/element-ui/lib/theme-chalk/index.css Module ...

vue踩坑系列——backgroundImage路径问题

vue踩坑系列——backgroundImage路径问题相关推荐

最新文章

热门文章