Module not found Error or Unable to load image in react JS

Question

This is my project structure :

src
 -assets
     fut.png
 -components
    -admin_dashboard
        Sidebar.js
 -App.js
 -pages
    Dashboard.js

I wanted to load the image fut.png from the file Sidebar.js. As it was not loading when calling with its relative path such as <img src={"../assets/fut.png"}/> , I tried <img src={require("../assets/fut.png")}/> - this results in this error:

Module not found: Error: Can't resolve '../assets/fut.png' in 'D:\Users [DONT DELETE]\react js\fut_test\src\components\admin_dashboard'

First am rendering the Dashboard component from App.js. Then rendering the Sidebar component from Dashboard.js.Thus the call to Sidebar.js file is initiated.

Actually i tried loading the image by putting even in the same folder of Sidebar.js file accessing it as <img src={"fut.png"}/> .Even that didn't load the image. How can i fix this?

Dashboard.js

import React from 'react'

function Sidebar(){

return(
        <div className="flex">
<img src={require("../assets/future_ik.png")} />
</div>
); 
     }

export default Sidebar

I have already gone through these links:

But still don't know how to solve this in my case. Any help is appreciated.

score 0 · Answer 1 · answered Jun 09 '23 at 13:29

you can try something like this

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

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

<img src={logo} />

you could also try with another image in jpeg format to see if it does not come from the

basically it gives something like this

import React, { Component } from 'react';
import logo from '../logo.svg';
export default class Header extends Component {
  render() {
    return (
      <div className="row">
        <div className="logo">
          <img src={logo} width="100" height="50" />
        </div>
      </div>
    );
  }
}

Module not found Error or Unable to load image in react JS

1 Answers1