17

I'm still learning webpack, and I was having trouble getting images to show up in my production build until I stumbled upon some code which had a require('path/to/image.png') at the top of a .js file. So I tried it, and lo and behold it works.

This seems wonky to me. Do I really have to include one of these for every static image I need to serve? Is there a better way to do this? This is going to be messy if not.

Anj
  • 974
  • 2
  • 10
  • 22

3 Answers3

6

There are loaders like css-loader and url-loader which resolve urls to base64 inlined data strings instead of serving up the static asset.

You can see this great guide for how to implement with url-loader. If you are having issues you need to make sure you are using the correct relative path.

'./path/to/image.png'

Sean Larkin
  • 6,290
  • 1
  • 28
  • 43
  • I am aware of these loaders you mention and am already using both. Sometimes it doesn't make sense to base64 encode the images though, and in any case I believe you still have to `require('path/to/image.png')` which is what I'm really asking about. Is there a way to include my images by simply referring to them in the html, rather than having to require them in my js? – Anj Jun 14 '16 at 16:27
  • 1
    If you set the `limit` query for `url-loader` it will only online images up the the specified asset size. If it is larger then file loader will automatically emit that file with your bundles for you. – Sean Larkin Jun 15 '16 at 22:09
  • 2
    Yes, I know that as well, but this doesn't really answer my question. I want to know if there is some way I can circumvent the need to do a `require('path/to/image.png')` in my javascript file. I don't know how I could be any more clear that this is what I'm asking. – Anj Jun 16 '16 at 12:24
  • Do you have `html-loader` in your config? You don't have to require() any html but there is additional resolution features with url-loader. Let me know if that works. – Sean Larkin Jun 16 '16 at 15:02
  • 3
    To answer the question you're actually asking, no, you can't include the image without importing it in some way into your javascript, whether it's with require() or es6 imports. – misdreavus79 Mar 16 '17 at 17:33
  • 2
    @Anj, Not sure about webpack 1, but the url-loader in webpack 2 doesn't require the use of `require()`. It works by simply using the correct path syntax as Sean mentioned above. It works for me, and I'm definitely not using `require()` for images. – squidbe Sep 08 '17 at 23:40
6

You can use the CopyWebpackPlugin to move src files to an assets folder when building the webpack project.

Details in this answer: https://stackoverflow.com/a/33374807/492976

charliesneath
  • 1,917
  • 3
  • 21
  • 36
  • 2
    If you use this plugin then how do you append a hash-code to your assets? If you don't you have problems with browser not updating the cache on deploys. – Gherman Oct 30 '17 at 09:14
0

Using React, the npm package babel-plugin-transform-react-jsx-img-import resolves any img elements and there is no need to explicit import or require those image resources. 

import React from 'react';
const Image = () => {

   {* webpack configured to resolve
      the alias 'images' *}

   return (img src='images/foo.png'/>);
}

export default Image;
Natan Williams
  • 1,447
  • 1
  • 8
  • 13
  • 1
    A link to a solution is welcome, but please ensure your answer is useful without it: add context around the link so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. See https://meta.stackexchange.com/a/8259 – Ioannis Barakos Oct 31 '19 at 11:44