如何使用 Node 和 Webpack 正确加载照片？

Posted 2023-02-22

【中文标题】如何使用 Node 和 Webpack 正确加载照片？

【英文标题】：How to properly load photos with Node and Webpack?

【发布时间】：2018-03-18 20:31:35

【问题描述】：

我应该通过导入相对路径还是通过引用文件 URL 在节点中加载照片，以及如何正确地从相对路径加载照片？

目前我正在使用 express 提供静态文件：

server.use(express.static(__dirname + '/../public'));

并通过引用文件 URL 来加载照片：

  <img src='/images/tom.jpg'/>

我有一个 webpack 配置设置为在 (png|jpg|gif) 上使用文件加载器，并且 webpack 文档说，使用文件加载器，您可以从相对路径 (https://webpack.js.org/loaders/file-loader/#src/components/Sidebar/Sidebar.jsx) 导入照片：

import img from './file.png'

使用此配置（这是我正在使用的配置）：

module.exports = 
  module: 
    rules: [
      
        test: /\.(png|jpg|gif)$/,
        use: [
          
            loader: 'file-loader',
            options:   
          
        ]
      
    ]
  

但是，当我尝试从其相对路径导入图像时：

//import   
import img from '../../public/images/tom.jpg';

//render
<img src=img/>

我收到此错误：

/Users/ryan/Desktop/Df/Coding/ryanchacon.io/node_modules/babel-core/lib/transformation/file/index.js:590 抛出错误； ^

语法错误： /Users/ryan/Desktop/Df/Coding/ryanchacon.io/public/images/tom.jpg： 意外字符 '�' (1:0)

1 | ����

但是，如果我发出“从相对路径导入”，启动我的服务器，然后将相对导入添加回来，图像将从其相对路径加载。但是，如果我重新启动服务器，则会再次引发错误。

因此，我改为引用文件 URL 来解决此错误，但我不确定如何使用我的 webpack/node 配置从它们的相对路径正确加载文件。

目前，我正在运行 node v8.6.0、webpack v3.6.0、express v4.15.4、file-loader v1.1.5 和 react v16.0.0。

【问题讨论】：

您的服务器运行状况如何？意思是，你在运行捆绑代码吗？提醒：Node.js 本身不知道如何导入图像文件（或任何其他非 JS 文件）。

是的，我正在使用 webpack 将代码捆绑到 /bundle.js 中，并将其放入 html 中的脚本标记中。我根据我的应用程序用于测试文件加载器的依赖项创建了一个最低限度的项目。这模仿了我的设置并产生相同的错误：github.com/Always-Sunny/bare-minimum/tree/fileloader

所以问题是，你的 node.js 服务器甚至得到 jpg 导入语句的场景是什么，因为它是客户端代码

通过快递；使用它来渲染一个模板引擎（ejs），它通过根 id 对钩子做出反应。还使用它通过公共文件夹提供静态文件

【参考方案1】：

在您的 server.js 文件中，您正在使用服务器端渲染（这很棒）：ReactDOMServer.renderToString( <App /> )。在服务器端呈现的App 组件是通过import App from './src/App'; 语句导入的。在 App.js 文件中，您有 JPG 导入语句：import img from '../public/hermes.jpg';。

请注意在这种情况下，您的 node.js 不知道您项目中的任何 webpack 包，并且 node 实际上尝试导入 '../public/hermes.jpg' 文件，这会导致您出现错误重新面对（节点只能加载 JS 模块）。

所以问题实际上是如何以通用/同构的方式使用file-loader。你可以看看这个示例项目：https://github.com/webpack/react-webpack-server-side-example，它显示了服务器和客户端代码的 webpack 配置。理论上，如果你通过 webpack 打包你的服务器代码，当你运行它时，JPG 导入语句已经被文件加载器处理了，应该不会造成任何问题。我不得不承认，我个人认为捆绑服务器代码不是一个好主意（捆绑解决了与服务器端无关的客户端问题）。

如果您坚持使用file-loader 并将图像文件捆绑到客户端代码中，那么使用服务器端 webpack 可能是一个不错的解决方案。如果没有，您可以简单地从/public 文件夹中加载图像。

对于它的价值，我相信使用 URL 加载图像不仅更简单，而且速度更快 - 浏览器将下载你更轻的 JS 包（它更轻，因为它不包含编码的图像文件）并且你的代码将尽早开始运行，以并行、异步的方式从 HTTP 下载图像。

【讨论】：

感谢您对吉拉德的洞察力。我想知道你是否愿意看看我在文件加载器 GitHub 上发布的问题：github.com/webpack-contrib/file-loader/issues/210 当我发布它时，版主克隆了我的存储库，更新了文件加载器，并在一秒钟内完成了相关导入，但是当我这样做时，我仍然收到错误。所以我仍然遇到一些潜在的问题。即使它是导致错误的服务器渲染，其他人也能够获取我的代码，并让它在不改变任何东西的情况下工作，但更新依赖项，我很难过。

再一次，在我看来这个问题与file-loader 无关，因为你的node.js 运行的代码不知道file-loader 也不知道webpack。我猜是版主有某种误解，因为没有理由让相同的代码在两个环境中表现不同。