How do I reference a local image in React?

First of all wrap the src in {}

Then if using Webpack; Instead of: <img src={"./logo.jpeg"} />

You may need to use require:

<img src={require('./logo.jpeg')} />

Another option would be to first import the image as such:

import logo from './logo.jpeg'; // with import

or …

const logo = require('./logo.jpeg); // with require

then plug it in…

<img src={logo} />

I’d recommend this option especially if you’re reusing the image source.

Leave a Comment