碰到h5中背景图片无法显示的莫名其妙的问题

发现问题

使用背景图片渲染头像，但是发现有些头像能显示，有些就是空白的，看了一下，不显示的头像是因为background-image属性莫名其妙失效了。。。
这种不能显示：


这种就能显示：

对比一下，导致background-image属性失效的图片地址里有空格，那不是简单，把地址里的空格去掉，用正则表达式啊！

<div class="avatar" :style="{backgroundImage: 'url('+detailInfo.fdImage.thumbnailUrl.replace(/\s+/g, '')+')'}"></div>

但是发现去掉之后还是无法显示啊。。。

其实这是正常的，人家爬虫爬取的数据是这个，肯定得是一模一样的URL才能访问这个图片啊，也就是必须加上空格，但是加上空格background-image就失效，这就很尴尬了。

解决方法

同样是用正则表达式，把空格全部替换成%20，如下：

<div class="avatar" :style="{backgroundImage: 'url('+detailInfo.fdImage.thumbnailUrl.replace(/\s+/g, '%20')+')'}"></div>

完美解决~
因为url会把地址中的空格转换成%20，这是url编码的表示方式，对于每个字节，可以用%后面跟ASCII码的两位十六进制值表示，根据URL的编码：空格的ASCII码是20，%表示采用ASCII码，%20就表示这是一个空格了。

文章已转移到个人公众号，有帮到你的话，用发财的小手关注一下我的公众号呗~