在呈現之前動態加載圖像

我瀏覽了很多問題，但找不到正確的答案。假設我有一個images文件夾，我想在那裏顯示一個特定的圖像。我不知道要顯示的圖像的名稱，它是由RESTful API返回的，以及我正在顯示的該對象的許多其他詳細信息。在呈現之前動態加載圖像

我認爲是幾個選擇這樣做：

加載全部圖像無論是什麼，然後只呈現我所需要的人。我在幾個地方發現了這個，但我認爲它很重，不是嗎？
使用webpack到require我需要的文件。

第二種選擇似乎是最好的。然而，當我這樣做：

componentDidMount() { 
    axios.get('http://url.to/my/RESTful/api') 
     .then(res => { 
      this.setState(res.data); 
     }); 
} 
render() { 
    var pic = require(`../images/${this.state.picture}`) 
    return (<img src={pic} alt="some name" />) 
);

陣營抱怨它不能加載undefined，因爲它開始呈現Axios的呼叫會之前完成。因此，另一個替代方案是在調用完成時顯示加載器，或者防止整體渲染。但我的問題是：這裏最好的做法是什麼？我應該在每個頁面加載動態數據的加載器嗎？我想我錯過了一些東西，這就是爲什麼我要伸出援手。你通常如何做到這一點？非常感謝。

來源

2017-08-18 Johy

嘗試以下操作：

class ImageLoader extends Component { 
    constructor() { 
     super(); 

     this.data = { 
      data: null 
     }; 
    } 

    componentDidMount() { 
     axios.get("http://url.to/my/RESTful/api").then(res => { 
      this.setState({ data: res.data }); 
     }); 
    } 

    render() { 
     return this.state.data 
      ? <img 
        src={require(`../images/${this.state.data.picture}`)} 
        alt="some name" 
       /> 
      : null; 
    } 
}

來源

2017-08-18 13:36:51

非常感謝。這是可行的，因爲我們不會在加載之前渲染任何東西。那麼我的問題是：創建圖像加載器是否是最佳做法？尤其是，RESTful API URL不是靜態的，取決於我加載的對象的類型。你會建議單獨提供圖像，並使用一個通用的圖像加載器，可能嗎？ – Johy

我肯定會推薦單獨提供圖片，因爲這有助於您的應用可以長期擴展，並且考慮到未來是一個很好的設計原則。通過將URL作爲像'axios.get（this.props.url）'這樣的prop來傳遞，你當然可以使上面的代碼變得通用。不知道這是否有幫助或不。 –

這真的幫助我理解我應該怎麼想，是的！並感謝您的建議。我想我會創建一個像你建議的圖像加載器，但可能只傳遞圖像名稱，如果它未定義，它不會返回任何內容。現在應該可以工作，並且在將來我可以依靠CDN輕鬆升級。 – Johy

在呈現之前動態加載圖像

回答

相關問題