Handling Png files in typescript

From Logic Wiki
Jump to: navigation, search


In case there is an error like this appears in VS Code :

The Cannot find module './assets/logo.png' or its corresponding type declarations.ts(2307)

Create a declaration file: In your project's src folder (or root, depending on project structure), create a new file (e.g., declarations.d.ts, custom.d.ts, or index.d.ts inside a types folder).

In my case I added like this :

/src/@types/declarations.d.ts 

Add the declaration: Add the following code inside the new declaration file:

declare module '*.png' {
  const value: string;
  export default value;
}

This snippet tells TypeScript to treat any import ending with .png as a module that exports a string value (which will be the image path/URL after bundling).

Ensure TypeScript includes the file: Make sure the folder containing your .d.ts file is included in your tsconfig.json's include property, if you are using specific inclusions.