发现问题
使用背景图片渲染头像,但是发现有些头像能显示,有些就是空白的,看了一下,不显示的头像是因为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就表示这是一个空格了。
文章已转移到个人公众号,有帮到你的话,用发财的小手关注一下我的公众号呗~