React won’t load local images

I am building a small react app and my local images won’t load. Images like loads. I thought maybe it could be something with the server?

Here is my App.js

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="home-container">
                <div className="home-content">
                    <div className="home-text">
                    <div className="home-arrow">
                        <p className="arrow-text">
                        <img src={"/images/resto.png"} />

export default App;


import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Link } from 'react-router';
import { createHistory } from 'history';
import App from './components/app';

let history = createHistory();

    <Router history={history} >
        <Route path="/" component={App} >
            <Route path="vzdelani" component="" />
            <Route path="znalosti" component="" />
            <Route path="prace" component="" />
            <Route path="kontakt" component="" />
        <Route path="*" component="" />

and server.js:

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./');

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath


app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));

app.listen(3000, 'localhost', function(err) {
  if (err) {

  console.log('Listening at http://localhost:3000');


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

When using Webpack you need to require images in order for Webpack to process them, which would explain why external images load while internal do not, so instead of <img src={"/images/resto.png"} /> you need to use <img src={require('/images/image-name.png')} /> replacing image-name.png with the correct image name for each of them. That way Webpack is able to process and replace the source img.

Method 2

I started building my app with create-react-app (see “Create a New App” tab). The that comes with it gives this example:

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;

export default Header;

This worked perfectly for me. Here’s a link to the master doc for that README, which explains (excerpt):

…You can import a file right in a JavaScript module. This tells Webpack
to include that file in the bundle. Unlike CSS imports, importing a
file gives you a string value. This value is the final path you can
reference in your code, e.g. as the src attribute of an image or the
href of a link to a PDF.

To reduce the number of requests to the server, importing images that
are less than 10,000 bytes returns a data URI instead of a path. This
applies to the following file extensions: bmp, gif, jpg, jpeg, and

Method 3

Another way to do:

First, install these modules: url-loader, file-loader

Using npm: npm install --save-dev url-loader file-loader

Next, add this to your Webpack config:

module: {
    loaders: [
      { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192' }

limit: Byte limit to inline files as Data URL

You need to install both modules: url-loader and file-loader

Finally, you can do:

<img src={require('./my-path/images/my-image.png')}/>

You can investigate these loaders further here:



Method 4

Best way to load local images in react is as follows

For example, Keep all your images(or any assets like videos, fonts) in the public folder as shown below.

enter image description here

Simply write <img src='/assets/images/Call.svg' /> to access the Call.svg image from any of your react component

Note: Keeping your assets in public folder ensures that, you can access it from anywhere from the project, by just giving ‘/path_to_image’ and no need for any path traversal ‘../../’ like this

Method 5

By doing a simple import you can access the image in React

import logo from "../images/logo.png";
<img src={logo}/>

Everything solved! Just a simple fix =)

Method 6

Use the default property:

<img src={require(`../../assets/pic-${j + 1}.jpg`).default} alt='pic' />

EDIT (Further explanation):

require returns an object:

Module {default: "/blah.png", __esModule: true, Symbol(Symbol.toStringTag): "Module"}

The image’s path can then be found from the default property

Method 7

Here is how I did mine:
if you use npx create-react-app to set up you react, you need to import the image from its folder in the Component where you want to use it. It’s just the way you import other modules from their folders.

So, you need to write:

import myImage from './imageFolder/imageName'

Then in your JSX, you can have something like this: <image src = {myImage} />

See it in the screenshot below:

React won't load local images

Method 8

I too would like to add to the answers from @Hawkeye Parker and @Kiszuriwalilibori:

As was noted from the docs here, it is typically best to import the images as needed.

However, I needed many files to be dynamically loaded, which led me to put the images in the public folder (also stated in the README), because of this recommendation below from the documentation:

Normally we recommend importing stylesheets, images, and fonts from JavaScript. The public folder is useful as a workaround for a number of less common cases:

  • You need a file with a specific name in the build output, such as manifest.webmanifest.
  • You have thousands of images and need to dynamically reference their paths.
  • You want to include a small script like pace.js outside of the bundled code.
  • Some library may be incompatible with Webpack and you have no other option but to include it as a tag.

Hope that helps someone else! Leave me a comment if I need to clear any of that up.

Method 9

I just wanted to leave the following which enhances the accepted answer above.

In addition to the accepted answer, you can make your own life a bit easier by specifying an alias path in Webpack, so you don’t have to worry where the image is located relative to the file you’re currently in. Please see example below:

Webpack file:

module.exports = {
  resolve: {
    modules: ['node_modules'],
    alias: {
      public: path.join(__dirname, './public')


<img src={require("public/img/")} />

Method 10

you must import the image first then use it. It worked for me.

import image from '../image.png'

const Header = () => {
   return (
     <img src={image} alt='image' />

Method 11

I am developing a project which using SSR and now I want to share my solution based on some answers here.

My goals is to preload an image to show it when internet connection offline. (It may be not the best practice, but since it works for me, that’s ok for now)
FYI, I also use ReactHooks in this project.

  useEffect(() => {
    // preload image for offline network
    const ErrorFailedImg = require('../../../../assets/images/error-review-failed.jpg');
    if (typeof window !== 'undefined') {
      new Image().src = ErrorFailedImg;
  }, []);

To use the image, I write it like this

<img src="/assets/images/error-review-failed.jpg" />

Method 12

Try changing the code in server.js to –

app.use(require('webpack-dev-middleware')(compiler, {
      noInfo: true,
      publicPath: config.output.path

Method 13

Sometimes you may enter instead of in your image location/src:


instead of


Method 14


Using of src attribute in this way means, your image will be loaded from the absolute path “/images/resto.png” for your site. Images directory should be located at the root of your site. Example:

Method 15

Here is what worked for me. First, let us understand the problem. You cannot use a variable as argument to require. Webpack needs to know what files to bundle at compile time.

When I got the error, I thought it may be related to path issue as in absolute vs relative. So I passed a hard-coded value to require like below:
<img src={require(“../assets/images/photosnap.svg”)} alt=”” />. It was working fine. But in my case the value is a variable coming from props. I tried to pass a string literal variable as some suggested. It did not work. Also I tried to define a local method using switch case for all 10 values (I knew it was not best solution, but I just wanted it to work somehow). That too did not work. Then I came to know that we can NOT pass variable to the require.

As a workaround I have modified the data in the data.json file to confine it to just the name of my image. This image name which is coming from the props as a String literal. I concatenated it to the hard coded value, like so:

import React from "react";

function JobCard(props) {  

  const { logo } = props;
  return (
      <div className="jobCards">
          <img src={require(`../assets/images/${logo}`)} alt="" /> 

The actual value contained in the logo would be coming from data.json file and would refer to some image name like photosnap.svg.

Method 16

I faced the same issue, and I found out the problem was the location of my images.
Instead of saving them into the src folder, you should store them in the public directory and have direct access.


Method 17


So I had this issue only when I was mapping over an array with multiple images. Normally with imports import artist3 from './../../../assets/images/cards_images/artists/artist3.png'; it works fine but the issue was when looping over the multiple images form an array.

I am sharing the solution that I used to approach it.

Previously—– I was using imageurl: 'your_image_url.png'

Now—— So in my array I changed to this imageurl: require('your_image_url.png')

  const artists = [
{firstname: 'Trevor', lastname: 'Bowman', imageurl: require('./../../assets/images/cards_images/artists/artist1.png') },
{firstname: 'Julia', lastname: 'Deakin', imageurl: require('./../../assets/images/cards_images/artists/artist2.png') },
{firstname: 'Stewart', lastname: 'Jones', imageurl: require('./../../assets/images/cards_images/artists/artist3.png') },
{firstname: 'Arsene', lastname: 'Lupin', imageurl: require('./../../assets/images/cards_images/artists/artist1.png') },


Now in the other component where I used this data to loop over the artists I binded to the image src as follows

<img src={artist.imageurl.default} className="artists__content--image br-08" alt={'img'+index} />

Because when you put the require() thing you get the Module object, which has a default property and it has our url (screenshot attached below)

React won't load local images

So the .default thing is the extra one only to access url after using require()

Method 18

  • First, Check whether you have specified the current location of the image or not, if you face difficulties setting the correct path , you can use this.
  • Second, Import the image just like you import any js file, Like this
import x from "../images/x.png";
<img src={x}/>

you can name x anything!!

Method 19

Ohhh yeahhh I had the same problem a few minutes ago and this worked for me:

import React from "react" import logo from "../images/logo.png"

export default function Navbar() {
            {/* <img className="nav--logo" src="../images/logo.png"/> */}
            <img className="nav--logo" src={logo} alt="logo"/>
    ) }

Method 20

I will share my solution which worked for me in a create-react-app project:

in the same images folder include a js file which exports all the images, and in components where you need the image import that image and use it :), Yaaah thats it, lets see in detail

folder structure with JS file

// js file in images folder
export const missing = require('./missingposters.png');
export const poster1 = require('./poster1.jpg');
export const poster2 = require('./poster2.jpg');
export const poster3 = require('./poster3.jpg');
export const poster4 = require('./poster4.jpg');

you can import in you component:
import {missing , poster1, poster2, poster3, poster4} from ‘../../assets/indexImages’;

you can now use this as src to image tag.

Happy coding!

Method 21

I was facing the same issue and i have figure out this solution and it works like a magic.
src={${window.location.origin.toString()}/${Image name here}}

Method 22

if you have your images folder inside the public folder, you need to try this:

<img src={process.env.PUBLIC_URL + “/images/test.jpg”}

i had the same issue and hopefully by trying this, everything just got back to normal.

when you are dealing with HTML & CSS, you can use your old method for accessing the images. but when you are in React, you are basically dealing with JSX. so this solution might be helpful for many React Programmers who are struggling with loading images in React properly.


do you remember we had a long comment in a file called index.js which was located inside our public folder? if you don’t remember which comment i’m talking about, just check out the screenshot below 👇🏼:

React won't load local images

i thought that it might be helpful to read it cos it’s actually related to this topic and issue.

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x