使用webpack和React加載圖像

Question

我是使用React和webpack的新手，我似乎無法將我的資產目錄中的圖像加載到我需要的反應文件中。它顯示在本地服務器上，但是當我在我的github頁面上運行它時，圖像沒有正確加載

此代碼在本地服務器上正常工作。

Portfolio.jsx

<img src="../assets/hood.png"/>

有沒有辦法從該React文件中要求我的資產目錄？

這是我的gh頁面： https ： //jcook894.github.io/Portfolio/

Answer 1

您可以使用require關鍵字以便正確解析它。

像這樣的東西：

<img src={require('../assets/hood.png')}/>

為此，您需要在webpack配置文件中加載文件加載器。 配置看起來像這樣：

module: {
    loaders: [
        {test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel']},
        {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
        {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
        {test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
        {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
        {test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'},
        {test: /\.ico$/, loader: 'file?name=[name].[ext]'},
        {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']},
        {test: /\.json$/, loader: "json"}
    ]
}

請注意，對於jpep，jpg，png和gif，它會使用您的filename.ext將文件復制到dist目錄。 如果要在dist文件夾中獲取圖像，但路徑不正確，請檢查加載器中的pathName參數修復。

我沒有用你的代碼測試它，但這是一般的想法。