本地图片上传服务器后不显示问题

起因

正常来说设置背景图片都是下面这样的css写法:

background-image: url('../../assets/xxx.png');

但在本地的时候图片还在,上传服务后就不显示.

原因

一开始图片图片放在了assets文件夹下，img和background-image引用都用相对路径，build的时候设置assetsPublicPath: ‘./‘，打包出来后发现background-image的路径出现了问题

解决方法:

1、先在data里面导入这张图片，例如：

 bg: require('../../assets/xxx.png'),

2、然后在template里面对需要background-image属性的DOM做个绑定，例如：

:style="{backgroundImage: 'url('+bg+')'}"

这样就可以避开因打包而造成的的路径问题了

转载于:https://www.jianshu.com/p/8b5ca9249948