使用Webpack和React时，使用图像可能无法正常工作

Question

我有一个使用webpack和react的项目。我使用file-loader/url-loader来在webpack/react设置中使用图像。在我的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;

- Rick Grendel

---

你能否展示更详细的代码？ - Stephen Kingsley

@Up209d 我已经添加了配置。 - Rick Grendel

@RickGrendel 嘿兄弟，为什么你的 dev-server 有一个 contentBase 是 src/client，它应该从你的 BUILD_DIR 提供资产，因为所有经过 Webpack 的 file loaders 处理的资产都会被传送到那里。 - Up209d

@Up209d，index.html文件就在那个文件夹里面，在那个index.html文件中，我调用了bundle.js，这就是我学习的方法:S - Rick Grendel

@RickGrendel 我的朋友，你可以使用 html-webpack-plugin 插件，它会将你的 bundle.js 注入到 index.html 中，并将 HTML 文件复制到 BUILD_DIR。无论如何，你都应该在 BUILD_DIR 启动 dev-server。 - Up209d

Answer 1

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

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

以下是webpack文档对url-loader的说明。

如果文件小于字节限制，则url-loader的工作方式类似于file-loader，但可以返回DataURL。

此外，您指示webpack使用相同文件扩展名的不同文件名称，这可能也会创建问题。
url-loader > name : 'images/[hash]-[name].[ext]'
file-loader > name: "images/[name].[hash].[ext]" 我已经上传了这个GitHub repo，您可以查看。它按照您的建议加载图像。调整url-loader的limit设置并检查源代码，您会看到URL从base64编码的图像更改为URL。

- Roy Scheffers

Answer 2

对于 webpack 5，请使用 type: 'asset/resource'

#webpack.config.js {test: /.(png|jpe?g|gif|eot|woff2|woff|ttf|svg)$/i, type: 'asset/resource', },

- Goaul

---

在我看来，这是最相关的评论。谢谢。 - khandaniel