使用Webpack提供静态图片服务

Question

我遇到了关于webpack和react在webpack dev server上提供静态图片的问题。

这是我的当前文件夹结构。

如您所见，我有一个资产文件夹，其中包含所有我的图像。这是我的webpack入口和输出配置。

客户端入口是我的React项目的源代码 CLIENT_ENTRY: path.join(process.cwd(), 'src/client/index.jsx')

现在这是我在BASH中输出的结果，当webpack完成它的工作后

这是我尝试从项目根目录中的assets文件夹加载图像的位置

只有预期的导入有效。

我尝试在 webpack 中更改输出和公共路径，比如：

path: path.resolve(__dirname, 'dist'), publicPath: '/',

path: path.resolve(__dirname, 'dist/assets'), publicPath: '/assets/',

path: path.resolve(__dirname, 'dist'), publicPath: '/assets',

path: path.resolve(__dirname, 'dist'), publicPath: '/assets/',

等等等等。

如果有人可以帮助我，那就太好了。

- jonjonson

---

我忘记在我的src/server/server.js中提到了，我正在使用express并像下面这样提供静态内容: // Serve static content for the app from the assets directory and build directory app.use(express.static('build')); app.use(express.static('assets')); - jonjonson

它们是否与输出的Main.js在相对路径中？否则，它显然不起作用。 如果你测试.jpg，你可以把它们放在源码中并使用Webpack构建。我会这样做： { test: /\.(ttf|otf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?|(jpg|gif)$/, loader: 'file-loader?name=./static/fonts/[name].[ext]' } - cbll

类似这样的代码 const file = { test: /.(woff2?|jpe?g|png|gif|ico)$/, use: 'file-loader?name=./assets/images/[name].[ext]' }; - jonjonson

大致上是这样的，是的。试一试并更新您的JavaScript以包括输出图像的相对路径，然后让我知道。 - cbll

很高兴能够帮忙。我已将其添加为答案 :) - cbll

Answer 1

在您的webpack.config.js文件中，您需要将assets文件夹也作为服务提供。

{
  ...webpack,
  devServer: {
    contentBase: [__dirname + '/public', __dirname + '/assets'],
    ...webpack.devServer,
  },
}

- Richard

Answer 2

要理解webpack的思想，您需要将资源从源处理到目标。因此，请将图像添加到源文件中的相对路径（基本上是您的入口），并添加一个图像加载器（以及其他可能的内容）如下所示：

{
    test: /\.(woff2?|jpe?g|png|gif|ico)$/, 
    use: 'file-loader?name=./assets/images/[name].[ext]'
}

只需更新输出文件的相对路径为assets/images，它们就可以加载了。

- cbll

---

这只有在我导入图像时才有效。因此，如果我删除例如从'./test.jpg'导入测试，则其他图像src将无法工作。你知道可能是什么问题吗？ - jonjonson

是的，但我想要能够从图像路径渲染，因为我将通过服务获取图像路径。所以它必须像这样：<img src="path/to/my/assets/images" />。这将是动态的，而不是硬编码的图像。 - jonjonson

因为我将从服务中获取数据，例如用户：{name: 'John Smith'，imageUrl: 'path/to/my/assets/folder'}，并且可能有许多用户，当然不会是相同的图像。所以我不能像这样导入特定路径的图片：import thisUser from 'specific-path.jpg'; 你明白了吗？还是我的解释不够清楚？ - jonjonson

基本上，我想能够使用字符串引用图像，而不是导入。 - jonjonson

不，我已经实现了所有功能。但正如我所说的，这些图片已经存在，用户数据逻辑也已经实现。但问题在于，我无法通过我的资源文件夹来提供图片服务。因此，我不能像这样做<img src="assets/images/test.jpg" /> 这是我唯一的困境。 - jonjonson

Answer 3

这是针对React(18.1.0)和webpack (5.72.1)的修复方案

这适用于在<img src=""/>和<img src={url}/>中导入，无需导入或要求（import或require()）。

您必须首先告诉Webpack将图像包含在您的分发包中，我使用了一个文件加载器来实现此目的。

npm install file-loader --save-dev

然后你必须在你的webpack.config.js文件中设置一个规则

{
  test: /\.(gif|png|jpe?g)$/,
  loader: 'file-loader',
  options: {
      name: '[path][name].[ext]'
  }
},

我的项目结构如下：

project-name/
├── public
│   └── index.html
│   └── assets/
│       └── images/
│           └── *.png
├── src/
│   └── components
│       └── filewhereineedtoimport.js
│
├── webpack.config.js
└── package.json

组件中导入

<img src="/assets/images/desired-image.png"/>

我的启动脚本在 package.json 中

"scripts": {
"start": "webpack-dev-server --mode development --open 
 --hot",
"build": "webpack --mode production"
}

- Pedro Nunez