【问题标题】：Using images with webpack react wont work将图像与 webpack react 一起使用是行不通的
【发布时间】：2018-05-06 23:03:14
【问题描述】：

我有一个使用 webpack 和 react 的项目。我使用 file-loader / url-loader 在 webpack/react 设置中使用图像。在我的反应项目中，我做import Img from '/image/source/image.jpg'，但如果然后尝试<img src={Img}>，src 是一个base64 代码，上面写着module.exports = __webpack_public_path__ + "images/code.61e3a3939c2f93f30ac21419625c9a4f.jpg";，并且没有显示图像。我该如何解决这个问题？

webpack.config.js

var webpack = require( 'webpack' )
var path = require( 'path' )

var BUILD_DIR = path.resolve( __dirname, 'src/client/public' );
var APP_DIR = path.resolve( __dirname, 'src/client/App' );

var config = {
  mode : 'development',
  entry : APP_DIR + '/index.jsx',
  output : {
    path : BUILD_DIR,
    filename : 'bundle.js'
  },

  devServer : {
    publicPath : '/',
    contentBase : './src/client'
  },

  module : {
    rules : [
      {
        test : /\.jsx|js?/,
        include : APP_DIR,
        exclude : /(node_modules)/,
        loader : 'babel-loader',
        query : {
          presets : [ 'env', 'react' ]
        }
      },

      {
        test : /\.scss|.css$/,
        loaders : [ 'style-loader', 'css-loader', 'sass-loader' ]
      },

      {
        test : /\.(png|jp(e*)g|svg)$/,
        use : [{
          loader : 'url-loader',
          options : {
            limit : 8000,
            name : 'images/[hash]-[name].[ext]'
          }
        }]
      },

      {
        test : /\.(png|jp(e*)g|svg)$/,
        use : {
          loader: "file-loader",
          options: {
            name: "images/[name].[hash].[ext]"
          }
        }
      }
    ]
  }
};

module.exports = config;

【问题讨论】：

你能展示你的代码吗？
您能告诉我们更多详细的代码吗？
这是你需要在 Webpack 配置中使用 public-path 和 file-loader export name 解决的问题。您应该向我们展示您现在使用的 Webpack 配置。
@Up209d 我添加了配置
@RickGrendel 嘿兄弟，为什么你的dev-server 有contentBase 的src/client，它应该从你的BUILD_DIR 提供资产，因为你所有的资产都由Webpack file loaders 处理送到那里。

标签： javascript node.js reactjs webpack

【解决方案1】：

我建议删除 webpack.config.js 中的文件加载器，只使用 url-loader，因为两个插件的工作方式相似。据我了解，Webpack 现在使用两个加载器处理您的图像文件，因为您指定两个加载器由以下触发。
test : /\.(png|jp(e*)g|svg)$/,

由于图像通过两个加载器运行，这可能就是为什么您会看到 module.exports = __webpack_public_path__ + "images/code.61e3a3939c2f93f30ac21419625c9a4f.jpg"; 作为您的图像源的原因。

这是webpack docs 对 url-loader 的评价。

url-loader 像文件加载器一样工作，但是如果文件小于字节限制。

除了您指示 webpack 为相同的文件扩展名使用不同的文件名之外，这也可能会产生问题。
url-loader > name : 'images/[hash]-[name].[ext]'
文件加载器 > name: "images/[name].[hash].[ext]"

我已上传此GitHub repo，您可以查看。它会按照您的建议加载图像。调整 url-loader 的 limit 设置并检查源以查看从 base64 编码图像到 URL 的 url 变化。

【讨论】：