调用豆瓣API加载图片报403

由于豆瓣API请求次数限制,直接在Vue或React应用中加载图片会导致403错误。通过使用第三方缓存服务如https://images.weserv.nl/?url=来预处理图片链接,可以成功解决这个问题,虽然可能会增加一点加载时间。
摘要由CSDN通过智能技术生成
<React.Fragment>
    <img src="http://img3.doubanio.com/view/photo/s_ratio_poster/public/p511146807.jpg" alt="poster"/>
</React.Fragment>

以上的链接是豆瓣API接口返回的一个图片地址,如果在浏览器地址中直接访问,那怎么尝试都可以打开,但是在Vue/React代码中,它始终显示不出来,其实是豆瓣限制了图片的加载。

豆瓣API是有请求次数限制的,这会引发图片在加载的时候出现403问题,视图表现为“图片加载不出来”,控制台表现为报错403。

用缓存解决

// 解决403图片缓存问题
getImages(_url){
    if( _url !== undefined ){
        let _u = _url.substring( 7 );
        return 'https://images.weserv.nl/?url=' + _u;
    }
}

以上是一位网友提供的方法,只要在请求到的图片链接前面加上https://images.weserv.nl/?url=即可(注:这是一个专门缓存图片的网址),会有点慢。

<React.Fragment>
  
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值