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

Question

我应该通过导入相对路径还是通过引用文件 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。

Answer 1

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

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

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

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

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