Is there a better way of importing images in react?

Question

I'm importing images into a component, and due to the our file structure a complex relative path is required:

// TODO is there a better way of importing images? image helper?

import browserImg from './../../../assets/images/screenshot-browser.png';
import phoneImg from './../../../assets/images/screenshot-phone.png';

Is there a better way of doing this? Something like the image helper/asset-pipeline in ruby?

Are you using `create-react-app`? I would say this is more of a webpack question than React. You could change the `resolve.root` like in [**this answer**](http://stackoverflow.com/questions/27502608/resolving-require-paths-with-webpack). — Tholle, Apr 25 '17 at 14:22

score 0 · Answer 1 · answered Apr 25 '17 at 14:23

If you use Webpack to bundle your application, you can make use of webpack aliases:

resolve: {
    alias: {
        assets: 'src/assets' // relative to the webpack configuration file
    }
}

Then, you can simply use the alias to refer to your assets as such:

import browserImg from 'assets/images/screenshot-browser.png';

Is there a better way of importing images in react?

1 Answers1