Use string paths to images instead of requires when resolving img src and background-image urls

Question

I've got image loading working with webpack through file loader, however only if I require or import images. I was wondering how create-react-app achieves their functionality where everything that is placed in public folder is accessible ie <img src="/images/myLogo.jpg" /> works given that public/images/myLogo.jpg exists.

My project is structured in the following way

src/
  assets/
   images/
   fonts/
  components/
  index.js
  index.html
webpack.config.js
package.json

Is it possible to make it so despite where I am in my js files I could use <img src="/assets/images..." and background-image: url(/assets/images/...) to resolve my to files in my assets folder? Or at least something similar that doesn't require me to import these asset files?

Answer 1

You can use aliasing in webpack:

https://webpack.js.org/configuration/resolve/

module.exports = {
  //...
  resolve: {
    alias: {
      Assets: path.resolve(__dirname, 'src/assets/'),
      Images: path.resolve(__dirname, 'src/assets/images')
    }
  }
};

Then in your code you can access like:

import myimpage from 'Assets/images/myimage.png'
import another from 'Images/another.png'

or for an image:

<img src={require('Images/another.png')} />