调用豆瓣API加载图片报403

朴灿烈づ我的快乐病毒、 2024-04-18 21:31 68阅读 0赞

<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=][https_images.weserv.nl_url]即可（注：这是一个专门缓存图片的网址），会有点慢。

<React.Fragment>
         <img src={getImages('http://img3.doubanio.com/view/photo/s_ratio_poster/public/p511146807.jpg')} alt="poster"/>
    </React.Fragment>

这样就可以成果打开了。

<img src={this.props.images.small.replace('https','https://images.weserv.nl/?url=https')}  className={styles.img}/>

把访问地址修改成src="https://images.weserv.nl/?url=https://img3.doubanio.com/view/photo/s\_ratio\_poster/public/p2504027804.webp"就可以访问拉

[https_images.weserv.nl_url]: https://links.jianshu.com/go?to=https%3A%2F%2Fimages.weserv.nl%2F%3Furl%3D

发表评论取消回复

表情：

评论列表（有 0 条评论，68人围观）

还没有评论，来说两句吧...

相关阅读

相关调用豆瓣API加载图片报403

<React.Fragment> <img src="http://img3.doubanio.com/view/photo/s_ratio_pos...

朴灿烈づ我的快乐病毒、/ 2024年04月18日 21:31/ 0 赞/ 69 阅读

相关小程序请求豆瓣API报403的三种解决方法。

微信小程序使用wx.request API请求豆瓣公开api的时候，会报一个403(Forbidden)的错误。这是为什么呢？是由于来自小程序的调用过多，豆瓣来自于小程序的

曾经终败给现在/ 2024年02月18日 21:52/ 0 赞/ 13 阅读

相关豆瓣api

https://api.douban.com/v2/book/isbn/9787534991905?apikey=0df993c66c0c636e29ecbb5344252a4

绝地灬酷狼/ 2023年06月13日 09:57/ 0 赞/ 16 阅读

相关豆瓣加载动画实现

最终效果如下 ![E7_AC_91_E8_84_B8.gif][] ValueAnimator类API 简介 ofFloat(float… values)

灰太狼/ 2022年08月22日 13:15/ 0 赞/ 253 阅读

相关图片加载

[Android四大图片缓存（Imageloader,Picasso,Glide,Fresco）原理、特性对比][Android_Imageloader_Picasso_Gl

川长思鸟来/ 2022年06月08日 07:30/ 0 赞/ 353 阅读

相关图片懒加载

<!--<me

亦凉/ 2022年05月23日 12:19/ 0 赞/ 485 阅读

相关图片懒加载

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

r囧r小猫/ 2022年05月21日 06:54/ 0 赞/ 529 阅读

相关小程序-Nginx代理请求豆瓣API ( 解决403问题 )

访问API：在微信小程序中，是无法访问的，可以使用https://douban.uieee.com来代替https://api.douban.com Nginx安装

傷城~/ 2022年01月26日 04:23/ 0 赞/ 279 阅读

相关 PIL加载图片，报错：unknown resampling filter

PIL加载图片，报错：unknown resampling filter File "/home/xuqiong/anaconda2/envs/ana3501a/li

素颜马尾好姑娘i/ 2022年01月15日 03:23/ 0 赞/ 364 阅读

相关图片加载时间缓慢问题API

一、背景最近段时间，开发写值工具项目中，出现图片加载问题API，响应时间缓慢；为了优化图片加载问题，我进行图片压缩方法，然后API的图片加载还是慢，最终在自己无

旧城等待，/ 2021年11月05日 11:56/ 0 赞/ 541 阅读