如何使用Node和Webpack正确加载照片? [英] How to properly load photos with Node and Webpack?

问题描述

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

Should I be loading photos in node by importing relative paths or by referencing the file URL, and how do you properly load photos from their relative path?

目前，我正在通过express提供静态文件:

Currently I'm serving static files with express:

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

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

And loading photos by referencing file URLs:

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

我设置了一个Webpack配置，以在(png | jpg | gif)上使用文件加载器，并且webpack文档说，使用文件加载器，您可以从相对路径导入照片(

I have a webpack configuration set up to use file-loader on (png|jpg|gif), and the webpack docs say, that with file-loader, you can import photos from relative paths (https://webpack.js.org/loaders/file-loader/#src/components/Sidebar/Sidebar.jsx):

import img from './file.png'

使用此配置(这是我正在使用的配置):

With this configuration (this is the config I'm using):

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

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

However, when I try to import an image from it's relative path:

//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/node_modules/babel-core/lib/transformation/file/index.js:590 throw err; ^

SyntaxError: /Users/ryan/Desktop/Df/Coding/ryanchacon.io/public/images/tom.jpg: 意外字符' '(1:0)

SyntaxError: /Users/ryan/Desktop/Df/Coding/ryanchacon.io/public/images/tom.jpg: Unexpected character '�' (1:0)

1 |

1 | ����

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

But if I emit the 'import from relative path', start my server, and then add the relative import back, the image will load from its relative path. However, if I restart my server, the error throws again.

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

So instead I'm referencing the file URL to get around this error, but I'm not sure how I should properly load files from their relative path with my webpack/node configuration.

当前，我正在运行节点v8.6.0，webpack v3.6.0，express v4.15.4，文件加载器v1.1.5和反应v16.0.0.

Currently, I'm running node v8.6.0, webpack v3.6.0, express v4.15.4, file-loader v1.1.5, and react v16.0.0.

推荐答案

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

In your server.js file, you're using server side rendering (which is awesome): ReactDOMServer.renderToString( <App /> ). The App component rendered on the server side is imported via the import App from './src/App'; statement. In the App.js file you have the JPG import statement: import img from '../public/hermes.jpg';.

请注意，在这种情况下，您的node.js不了解项目中的任何Webpack捆绑包，并且节点实际上尝试导入'../public/hermes.jpg'文件，这会导致错误:重新面对(节点只能加载JS模块).

Please notice that in this context, your node.js is not aware of any webpack bundle in your project, and node actually tries to import the '../public/hermes.jpg' file, which causes the error you're facing (node can only load JS modules).

实际上，问题是如何以通用/同构方式使用file-loader.您可以看一下这个示例项目: https://github.com/webpack/react-webpack-server-side-example ，显示了服务器和客户端代码的webpack配置.从理论上讲，如果通过webpack捆绑服务器代码，则在运行它时，文件导入器将已经处理JPG import语句，并且不会引起任何问题.我必须承认，我个人认为捆绑服务器代码不是一个好主意(捆绑解决了与服务器端无关的客户端问题).

So the question is, in fact, how to use file-loader in a universal/isomorphic manner. You can take a look at this example project: https://github.com/webpack/react-webpack-server-side-example that shows a webpack configuration for both the server and the client code. Theoretically, if you bundle your server code via webpack, when you run it, the JPG import statement would already be processed by the file loader and should not cause any problem. I have to admit that personally I do not think bundling server code is a good idea (bundling solves client side issues that are not really relevant on the server side).

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

If you insist using file-loader and bundling your image files into your client code, using server side webpack might be a good solution for you. If not, you can simply load the images from the /public folder.

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

For what it's worth, I believe that loading the images by using URLs is not only simpler, but also faster - the browser will download your lighter JS bundle (it's lighter because it does not contain encoded image files) and your code will start running earlier on, downloading the images from HTTP in a parallel, asynchronous manner.

这篇关于如何使用Node和Webpack正确加载照片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！