vue请求网络接口中图片无法显示报错403解决办法

自己写的小demo,使用mock数据,发现登录图片请求403,获取不到
在这里插入图片描述
解决方法如下
方法一:

在模拟数据avatar图像的前面加上
’https://images.weserv.nl/?url=’+'你的图片路径地址’

再次登录就有图像了
在这里插入图片描述

如果是请求后台接口无法获取图像的话

方法二:

getImages( _url ){
	if( _url !== undefined ){
        let _u = _url.substring( 7 );
        return 'https://images.weserv.nl/?url=' + _u;
    }
}

在此说明一下:

_u:提取http://后面的部分;
_url:是请求接口后返回的图片字段

请求后的结果调用此方法就好了

如果你是html页面的话可以直接在页面头部添加一个meta

方法三:
使用no-referrer

<meta name="referrer" content="no-referrer" />

no-referrer不仅针对图片的防盗链,还可以是其他标签
1.a标签的referrer

<a href="http://example.com" referrer="no-referrer|origin|unsafe-url">XXX</a>

2.img/image标签的referrer

<img referrer="no-referrer|origin|unsafe-url" src="xxx" />
<image referrer="no-referrer|origin|unsafe-url" src="xxx" />

以上都是亲测有效的,欢迎尝试


评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值