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