Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Facing "Cannot find module" Error for Image Import in React: '../assets/images/horizontal_logo.png'

I’m encountering an issue in my React project when trying to import an image using the following line:

import HorizontalLogo from '../assets/images/horizontal_logo.png';

The error message I’m getting is:

Cannot find module '../assets/images/horizontal_logo.png' or its corresponding type declarations.

I’ve checked the file path, and it seems to be correct. However, the error persists. Could someone guide me on resolving this import issue? Is there a specific configuration or step I might be missing? Any help would be appreciated.

Additional Context:

  • The image file is located at the specified path.
  • I’m using TypeScript in my React project.
  • Other imports and components in the project are working fine.

Thanks in advance for any assistance!

Tags:

2

Answers


  1. 0

    try using

    import HorizontalLogo from './images/horizontal_logo.png';

    read this link for more info How to import image (.svg, .png ) in a React Component

    Login or Signup to reply.
  2. 0

    To enable TypeScript to recognise and handle image file imports, you can create a declaration file in your project’s root directory. Follow these steps:

    1. Create a file named index.d.ts in the root directory of your project.

    2. Inside index.d.ts, add the following declarations to inform TypeScript about the module type for JPG and PNG files:

    // index.d.ts

// Declare module type for JPG files
declare module "*.jpg";

// Declare module type for PNG files
declare module "*.png";

    By doing this, TypeScript will understand that these file types are modules and allow you to import them in your code without encountering type errors.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search