项目中加载一个后端返回的二维码图片地址,在浏览器可以直接打开,但放到img标签就显示不出来
在线DOME
后来查资料得知是因为图片的链接是第三方地址,所以在有些浏览器可能会不兼容,导致不显示图片,比如谷歌不行,火狐却可以
<img src="https://mp.weixin.gg,com/cgi-bin/showgrcode?ticket=gOHB7ZWAAAAAAAAAAS5OdHRWOi" width="180"height="180">
解决方案1
网上说添加//images.weserv.nl/?url=
就可以解决了
<img src="//images.weserv.nl/?url=https://mp.weixin.gg,com/cgi-bin/showgrcode?ticket=gOHB7ZWAAAAAAAAAAS5OdHRWOi" width="180"height="180">
但我添加后还是没不显示
解决方案2
用background代替img
<div :style="{background: url, backgroundSize: '100% 100%'}" class="img"></div>
.img {
width: 180px;
height: 180px;
}