One of the ways to get rid of that error is by modifying d.ts file as follows:
declare module "*.png"
remove
{
const value: string;
export default value;
}
or alternatively you can do:
declare module "*.png" {
const value: any;
export default value;
}
Update
The best solution with type-checking is:
declare module "*.png" {
const value: any;
export = value;
}
Top answer 1 of 6
192
One of the ways to get rid of that error is by modifying d.ts file as follows:
declare module "*.png"
remove
{
const value: string;
export default value;
}
or alternatively you can do:
declare module "*.png" {
const value: any;
export default value;
}
Update
The best solution with type-checking is:
declare module "*.png" {
const value: any;
export = value;
}
2 of 6
46
For react-native
create global.d.ts file on project root folder and just add next lines there
declare module '*.png' {
const value: import('react-native').ImageSourcePropType;
export default value;
}
DEV Community
dev.to › minompi › add-images-to-a-react-project-with-typescript-4gbm
Add images to a React project with Typescript - DEV Community
July 22, 2022 - import React from "react"; import imageToAdd from "./../assets/images/logo.png"; function YourComponent() { return <img src={imageToAdd} alt="Image" />; } export default YourComponent; This works like a charm in a React project built using CRA or Vite. but if your project has a custom bundler, created using Typescript + Webpack, with the code above you will receive this error:
import images
This works with stock create-react-app: import logo from "./ss-logo-transparent.png"; More on github.com
25
May 14, 2017How to import image from Public folder as a Typescript module?
I have a default create-react-app setup with Typescript. My assets located in the public folder. I want to load image into canvas through another library (Phaser). And that works: let img = './... More on github.com
7
November 5, 2018Is there a less manual way of loading a bunch of images into an array?
Seems less than ideal to increase app size like this - what if those images are 50mb each? Approach aside, check this out as it seems relevant. You can use an external file for the processing, export it as a const, then import the image processing file as one module. https://stackoverflow.com/questions/48560592/is-it-possible-to-import-a-group-of-images-as-an-array-create-react-app-projec More on reddit.com
11
3
March 7, 2024reactjs - Importing images in TypeScript React - "Cannot find module" - Stack Overflow
I am trying to import images to use inside a React component with TypeScript. The bundler I'm using is Parcel (not Webpack). I have created a .d.ts file inside the project with the image file exte... More on stackoverflow.com
Videos
Code with Mosh
forum.codewithmosh.com › react
How to import image in react with typescript - React - Code with Mosh Forum
July 27, 2023 - Hello, I need help I don’t know how to import images to React project, I am just starting with the React course with typescript
Graffino
graffino.com › til › how-to-import-images-in-typescript
How to import images in Typescript • Today I Learned
Learn how to how to import images in Typescript and fix a common Typescript error: 'Cannot find module or its corresponding type declarations ts(2307)' .
Carl Rippon
carlrippon.com › using-images-react-typescript-with-webpack5
Using images in React and TypeScript with Webpack 5
February 3, 2021 - How to configure Webpack 5 so that images can be imported in a React app with TypeScript.
GitHub
github.com › microsoft › TypeScript-React-Starter › issues › 12
import images · Issue #12 · microsoft/TypeScript-React-Starter
May 14, 2017 - This works with stock create-react-app: import logo from "./ss-logo-transparent.png";
Published May 14, 2017
Author StokeMasterJack
React TypeScript Cheatsheets
react-typescript-cheatsheet.netlify.app › globals, images and other non-ts files
Troubleshooting Handbook: Globals, Images and other non-TS files | React TypeScript Cheatsheets
Likewise if you wish to "import" an image or other non TS/TSX file: // declaration.d.ts // anywhere in your project, NOT the same name as any of your .ts/tsx files declare module "*.png"; // importing in a tsx file import * as logo from "./logo.png"; Note that tsc cannot bundle these files for you, you will have to use Webpack or Parcel. Related issue: https://github.com/Microsoft/TypeScript-React-Starter/issues/12 and StackOverflow
GitHub
github.com › facebook › create-react-app › issues › 5719
How to import image from Public folder as a Typescript module? · Issue #5719 · facebook/create-react-app
November 5, 2018 - I have a default create-react-app setup with Typescript. My assets located in the public folder. I want to load image into canvas through another library (Phaser). And that works: let img = './assets/sprites/mushroom.png'; Phaser.game.sc...
Author glebkudr
Medium
minompi.medium.com › add-images-to-a-react-project-with-typescript-2338c28bf5d9
Add images to a React project with Typescript | by AlessandroMinoccheri | Medium
July 22, 2022 - import React from "react"; import imageToAdd from "./../assets/images/logo.png"; function YourComponent() { return <img src={imageToAdd} alt="Image" />; } export default YourComponent; This works like a charm in a React project built using CRA or Vite. but if your project has a custom bundler, created using Typescript + Webpack, with the code above you will receive this error:
YouTube
youtube.com › cyberpotato
Best way to load images in ReactJS with TypeScript - YouTube
Hello!Have you ever wondered how to improve the image loading experience in your ReactJS app? In this video I'm going to show you how to add error handling, ...
Published December 17, 2021 Views 7K
Medium
medium.com › @wcodyknapp › using-react-with-typescript-parcel-and-image-imports-af8c9a7c244
Using React with TypeScript, Parcel, and image imports | by Cody Knapp | Medium
September 16, 2020 - Using React with TypeScript, Parcel, and image imports So I think everyone can agree and appreciate that doing image imports in a react app is a wonderful thing. There are pros and cons, to be sure …
Reddit
reddit.com › r/typescript › is there a less manual way of loading a bunch of images into an array?
r/typescript on Reddit: Is there a less manual way of loading a bunch of images into an array?
March 7, 2024 -
I've done this:
import hangman0 from './assets/hangman0.png'; import hangman1 from './assets/hangman1.png'; import hangman2 from './assets/hangman2.png'; import hangman3 from './assets/hangman3.png'; import hangman4 from './assets/hangman4.png'; import hangman5 from './assets/hangman5.png'; import hangman6 from './assets/hangman6.png'; const hangman = [hangman0, hangman1, hangman2, hangman3, hangman4, hangman5, hangman6];
But I don't like it, because the whole point of coding is to automate repetitive tasks. So how would I go about writing something that could import an arbitrary folder of images into an array?
Top answer 1 of 2
4
If this is a Vite project, what you want is a glob import : const images = import.meta.glob("./assets/hangman*.png");
2 of 2
3
Seems less than ideal to increase app size like this - what if those images are 50mb each? Approach aside, check this out as it seems relevant. You can use an external file for the processing, export it as a const, then import the image processing file as one module. https://stackoverflow.com/questions/48560592/is-it-possible-to-import-a-group-of-images-as-an-array-create-react-app-projec
Top answer 1 of 16
312
Create an index.d.ts file in the folder src, and add this line:
declare module '*.jpg';
2 of 16
174
If you literally wrote "include": ["./src/index.d.ts"] in tsconfig.json and you don't have a "files" setting, that means the project defined by tsconfig.json includes only the single file ./src/index.d.ts. When you open any other file in VS Code, VS Code uses a separate language service instance that doesn't use your tsconfig.json. Adjust your "include" setting to match all the .ts and .tsx files in your project, or just delete it and rely on the default behavior of including all files under the directory containing tsconfig.json.
Round 2
TypeScript is ignoring index.d.ts because it assumes that index.d.ts is generated from index.tsx and index.tsx is more likely to be up to date. Name your index.d.ts file something else, e.g., declaration.d.ts.
Mattbatman
mattbatman.com › typescript-and-webpack-and-images
TypeScript and webpack and Images | mattbatman.com
December 29, 2017 - The bottom of webpack’s TypeScript guide has a section called, “Importing Other Assets” that addressed my first problem. I added a file in the root directory of the project that looked like this: declare module "*.png" { const content: any; export default content; } On the second problem: I spent a lot of time trying to get either file-loader or url-loader to copy the image file to my final distribution directory, as it had as a JavaScript project.
Coding Scenes
codingscenes.com › posts › 66 › Cannot-find-module-assets-images-icon-png-or-its-corresponding-type-declarations
Cannot find module '@/assets/images/icon.png' or its corresponding type declarations. - Coding Scenes
April 18, 2024 - You can do this by declaring a module for image files. Create a new file named custom.d.ts in your project (you can place it in your src directory or a types directory if you have one).
Reddit
reddit.com › r/typescript › how can i get rid of the error "cannot find module" when importing an image file?
r/typescript on Reddit: How can I get rid of the error "cannot find module" when importing an image file?
November 22, 2023 -
How can I get rid of the following error:
The image exists and the code words but I always have this error and I am tired of adding "@ts-ignore". This is happening in a React project created with CRA that uses the following jsconfig.json file:
{
"compilerOptions": {
"types": ["jest"],
"lib": ["ES2021", "DOM"],
"downlevelIteration": true,
"strict": true,
"jsx": "react",
"skipDefaultLibCheck": true,
"skipLibCheck": true,
"checkJs": true
},
"exclude": [
".git",
".app-cache",
".npm",
".npm-tmp",
"dist",
"dist*",
"node_modules",
"subfolder/dist",
"subfolder/node_modules",
"**/dist/*",
"**/node_modules/*"
]
}
Top answer 1 of 2
12
Create a *.d.ts file with this code declare module '*.png' { const value: number; export = value; } declare module '*.jpg' { const value: number; export = value; } declare module '*.webp' { const value: number; export = value; }
2 of 2
2
Add a declaration file in your project for the image types.
The Web Dev
thewebdev.info › home › how to allow image import with typescript?
How to allow image import with TypeScript? - The Web Dev
March 20, 2022 - To allow image import with TypeScript, we can use declare to declare the type for image files.
Top answer 1 of 7
44
The problem is that you confuse TypeScript level modules and Webpack level modules.
In Webpack any file that you import goes through some build pipeline.
In Typescript only .ts and .js files are relevant and if you try to import x from file.png TypeScript just does not know what to do with it, Webpack config is not used by TypeScript.
In your case you need to separate the concerns, use import from for TypeScript/EcmaScript code and use require for Webpack specifics.
You would need to make TypeScript ignore this special Webpack require syntax with a definition like this in a .d.ts file:
declare function require(string): string;
This will make TypeScript ignore the require statements and Webpack will be able to process it in the build pipeline.
2 of 7
22
Instead of:
import image from 'pathToImage/image.extension';
Use:
const image = require('pathToImage/image.extension');
GitHub
github.com › microsoft › TypeScript › issues › 52671
Feature: Get the correct type of imported image · Issue #52671 · microsoft/TypeScript
February 8, 2023 - It seems like Typescript is able to correctly identify the type of modules, so it would be nice if it can do the same thing to images. My workaround is to opt out of type checking. import logo from "../../public/logo.png" const logoObj: any = logo console.log(logoObj.src) // no type error
Author bytrangle
Angularfix
angularfix.com › 2022 › 01 › importing-images-in-typescript-react.html
Importing images in TypeScript React - "Cannot find module" ~ angularfix
June 1, 2022 - I have created a .d.ts file inside the project with the image file extension, and included it inside tsconfig.json. However, when I try to import an image, TS yells at me about Cannot find module.