How to properly load photos with Node and Webpack?

Question

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?

Currently I'm serving static files with express:

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

And loading photos by referencing file URLs:

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

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}/>

I receive this error:

/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: Unexpected character '�' (1:0)

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.

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.

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.

How are you running your server? Meaning, are you running bundled code? Reminder: Node.js by itself does not know how to import image files (or any other non-JS files for that matter). — Gilad Artzi
Yeah, I'm using webpack to bundle the code into /bundle.js and throwing that in a script tag in the html. I created a bare-minimum project based off the dependencies my app uses to test file-loader. This mimics my setup and produces the same error: github.com/Always-Sunny/bare-minimum/tree/fileloader — orpheus
So the question is, what is the scenario that your node.js server even get the jpg import statement, as it is client code — Gilad Artzi
Through express; using it to render a template engine (ejs) which react hooks onto via the root id. Also using it to serve static files via the public folder — orpheus

Gilad Artzi Gilad Artzi · Accepted Answer · 2017-10-09T04:50:04

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';.

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).

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).

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.

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.

How to properly load photos with Node and Webpack?

1 Answers