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

我没有用你的代码测试过，但这是一般的想法。

使用 webpack 和 React 加载图片

Using webpack and React to load images

github-pages

reactjs

webpack