使用 webpack 和 React 加载图片答案

【问题标题】：Using webpack and React to load images使用 webpack 和 React 加载图片
【发布时间】：2017-06-06 03:41:08
【问题描述】：

我是使用 React 和 webpack 的新手，我似乎无法将资产目录中的图像加载到我需要它的反应文件中。它显示在本地服务器上，但是当我在我的 github 页面上运行它时，图像不是正确加载

此代码在本地服务器上运行良好。

Portfolio.jsx

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

有没有办法从那个 React 文件中要求我的资产目录？

这是我的 gh 页面：https://jcook894.github.io/Portfolio/

【问题讨论】：

什么是“这个代码”？是html，还是jsx，还是什么？
抱歉 JSX，忘记添加了。

标签： reactjs webpack github-pages

【解决方案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 参数修复。

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

【讨论】：

我试过了，它给了我这个错误 ./Portfolio.jsx 中的错误找不到模块：错误：无法解析 /Users 中的 'file' 或 'directory' ../assets/hood.png /juliancook/投资组合@./Portfolio.jsx 24:42-71
所以将资产文件名插入名称所在的括号中？抱歉，对使用 webpack 还很陌生
我也是。但我遇到了这个问题，这得到了解决。建议您查看github.com/coryhouse/react-slingshot，它创建了一个示例应用程序，具有非常好的代码质量和解释。这个回购的所有者也有一门关于复数的课程。所以你也可以检查一下。