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参数修复。

我还没有使用您的代码对其进行测试，但这是一般的想法。

使用webpack和React加载图像

1 个答案: