调用豆瓣API加载图片报403

<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>
     <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"就可以访问拉