Create-React-App：如何正確加載靜態圖像

因此，我正在使用Create-React-App（CRA）構建應用程序。Create-React-App：如何正確加載靜態圖像

在我的一個組件中，我需要渲染18個圖像，而不是小圖像。這是我目前正在做的。

renderImages() { 
    return someArray.map((someValue, index) => { 
     let image = require(`../images/${someValue}.png`); 
     return (
     <Image src={image} key={index} /> 
    ); 
    }); 
    }

基本上，我通過循環具有PNG的所有名字的數組，每個迴路我會每一個圖像require()，共有18這是非常低效的，因爲這些圖像正在嘗試當組件已經安裝時需要。結果，圖像將不會顯示從1秒到5秒;它很不穩定。

所以我做了一些研究，看看如何正確地做到這一點，顯然我應該使用webpack配置加載圖像。聽起來不錯，但有一個問題。我正在使用CRA，因此我不允許觸摸任何webpack配置。

然後有人建議您可以彈出您的CRA申請。所以我看着它，並碰到這post其中說：

不要彈出！ CRA隱藏了很多引擎蓋下的東西，並且彈出了。只需將工具設置完成，將您的src複製到另一個項目中即可。

現在，我陷入困境。我不想將我的應用程序從CRA中彈出並丟失它的所有功能，但對每個圖像使用require的低效代碼都很麻煩。

問題：如何正確加載這些靜態圖像，要麼是圍繞CRA工作，要麼是重新編寫代碼。你們會建議我做什麼？

來源

2017-09-02 Phillip

瀏覽器只下載一次圖像。因此，您可以使用這樣的幫助功能，在致電renderImages()之前下載所有圖像。

function asyncDownloadImages(images) { 
    var listOfImages = images.slice(); 
    var blankImage = new Image(); 

    function downloadNextImage() { 
    var path = listOfImages.shift(); 
    blankImage.src = path;  
    } 

    blankImage.onload = function() { 
    if (listOfImages.length) { 
     downloadNextImage(); 
    } 
    } 

    downloadNextImage(); 
} 

var listOfImages = [ 
    'https://cdn-images-1.medium.com/max/1600/1*I9pLj7mYf8LC908Zi1JYzg.png', 
    'https://cdn-images-1.medium.com/max/1600/1*0klm8TN3bY1pa_CmeNBuCw.png', 
    'https://cdn-images-1.medium.com/max/1600/1*-9mT3HJF6ZEpXiioSxD0Kg.png', 
]; 

asyncDownloadImages(listOfImages);

我爲你寫了一些演示代碼。請檢查jsbin。因此，您可以在開發工具中看到，在DOM節點「root」獲得帶有src屬性中具有相同URL的圖像節點的標記之前，圖像只下載一次。

此外，您可以改善此功能，並將回調函數添加到參數，這將調用所有圖像下載。如果有必要;）

來源

2017-09-02 10:50:32 chuve

這是如何做到這一點，如果圖像不是本地？在我的情況下，他們是本地的圖像，所以我仍然這樣做呢？ – Phillip

也似乎新的圖像（）是不可能的反應組件。獲取未定義的錯誤 – Phillip

您對本地圖像有何意義？您可以將新的Image（）更改爲document.createElement（「img」），它應該適用於所有瀏覽器。 – chuve

Create-React-App：如何正確加載靜態圖像

回答

相關問題