Unable to import image in Reactjs returning error Module not found: Can't resolve [duplicate]

Question

I have the following component located in "projectfolder/src/pages/Home.js":-

import React from "react";
import MenuButton from "../components/Home/MenuButton";
import menuicon from "images/menuicon.png";

export default function Home() {
  return (
    <div className="container">
      <div className="row">
        <MenuButton title="home ">
          <img src={menuicon} />
        </MenuButton>
        <MenuButton title="account" />
        <MenuButton title="create new" />
      </div>
      <div className="row">
        <div className="col-md-12">
          <div className="signin-btns"></div>
        </div>
      </div>
    </div>
  );
}

I am trying to import an image file "menu-icon.png" which is located in "projectfolder/public/images".

I tried to import it using the following imports :-

1. import menuicon from "images/menu-icon.png" returned the following error :-

./src/pages/Home.js Module not found: Can't resolve 'images/menu-icon.png' in 'C:\Users\AHMAD\project\src\pages'

2. import menuicon from "/images/menu-icon.png";

./src/pages/Home.js Module not found: You attempted to import /images/menu-icon.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

3. import menuicon from "../../images/menu-icon.png";

./src/pages/Home.js Module not found: You attempted to import ../../images/menu-icon.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

I am using the ReactJS version : "^16.13.1" with "react-router-dom": "^5.1.2"

Answer 1

By putting the image in projectfolder/public/images it is outside your src directory. You won't be able to import it that way. You could do either of the following to resolve this:

• Move your image into projectfolder/src/images and import menuicon from './images/menu-icon.png'

• Leave it in public and remove the import statement. Instead use it like this: <img src='images/menu-icon.png' />