調用豆瓣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"就可以訪問拉