使用 Webpack 提供静态图像

Posted 2023-02-21

【中文标题】使用 Webpack 提供静态图像

【英文标题】：Serving static images with Webpack

【发布时间】：2017-08-11 11:41:09

【问题描述】：

我在使用 webpack 时遇到问题，并在 webpack 开发服务器上响应静态图像。

这是我当前的文件夹结构

如你所见，我有一个资产文件夹，里面有我所有的图片 这是我的 webpack 入口和输出配置

客户入口是我的反应项目的来源 CLIENT_ENTRY: path.join(process.cwd(), 'src/client/index.jsx')

现在这是我在 BASH 中的输出，当 webpack 完成了它的工作时

这是我尝试从项目根目录中的资产文件夹加载图像的地方

预计只有导入工作女巫。

我尝试在 webpack 中更改输出和公共路径 路径：path.resolve(__dirname, 'dist'), 公共路径：'/'，

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

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

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

等等..等等..

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

【问题讨论】：

我忘了在我的 src/server/server.js 中使用 express 并提供静态内容，如下所示 // 为资产目录中的应用程序提供静态内容并构建目录 app.use (express.static('build')); app.use(express.static('assets'));

它们是否在输出的 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]'

是的，它们就是这样

所以像 const file = test: /\.(woff2?|jpe?g|png|gif|ico)$/，使用：'file-loader?name=./assets/图像/[名称].[ext]' ;

类似的东西，是的。试一试并更新您的 javascript 以包含输出图像的相对路径并告诉我。

【参考方案1】：

在您的 webpack.config.js 中，您还需要提供 assets 文件夹。

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

【参考方案2】：

要遵循 webpack 背后的理念，您需要处理从源到目标的资产。

因此，将图像添加到源中的相对路径（本质上是条目所在的位置）并为图像添加加载器（也许还有其他东西）像这样：

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

只需将输出的相对路径更新为资产/图像，它们应该能够加载。

【讨论】：

这仅在我导入图像时有效。因此，如果我从“./test.jpg”中删除例如导入测试，那么另一个图像 src 将无法工作。你知道可能是什么问题吗？

是的，但我希望能够从图像路径渲染，因为我将通过服务获取图像路径。所以它必须像 。这将是动态而不是硬编码的图像

因为我会从像用户这样的服务中获取数据：name: 'John Smith', imageUrl: 'path/to/my/assets/folder' 并且可以有很多用户，它永远不会相同的图像的原因。所以我不能像 import thisUser from 'specific-path.jpg';你明白还是我的解释不够好？

基本上我希望能够引用带有字符串而不是导入的图像

不不，我已经实现了这一切。但正如我所说。图像将在那里，并且用户数据逻辑已经实现。但问题是我无法通过资产文件夹提供图像。所以我不能像 那是我唯一的困境