在使用webpack的反應項目中不加載圖像2

Question

我試圖呈現像這樣的圖像，但它們顯示爲頁面上的破碎圖像。

... 
return (
    <img src='/public/images/ic-account-circle-black-24-px-5.png' alt='uimg' /> 
) 

這是我處理的圖像文件的WebPack配置：

config.module.rules.push({ 
    test : /\.(png|jpg|gif)$/, 
    loader : 'url-loader', 
    options : { 
    limit : 8192, 
    }, 
}) 

Answer 1

我想的WebPack在默認情況下不檢測JSX圖片src。你需要有一個明確的關於它需要

https://github.com/petehunt/webpack-howto/issues/11

Answer 2

您需要要求圖像的WebPack使用url-loader

Example

var AccountCircle = require('src/images/ic-account-circle-black-24-px-5.png'); 

class Component extends React.Component { 
    render() { 
    return (
     <img src={AccountCircle} /> 
    ) 
    } 
} 

的WebPack將解決require解決問題使用url-loader，將其移動到您的目標文件夾並自動插入網址。