Typescript image import

Question

I found a solution here: Webpack & Typescript image import

But i am getting error for this:

[ts] Types of property 'src' are incompatible.   Type 'typeof import("*.png")' is not assignable to type 'string | undefined'.     Type 'typeof import("*.png")' is not assignable to type 'string'. 

I guess i need to cast import somehow, but cant figure out how. I am doing this in React. I saw that src attribute is defined as string | undefined, that is why error is popping.

Here is code:

import * as Logo from 'assets/images/logo.png'; 

HTML:

<img src={Logo} alt="" /> 

And definition based on above mentioned solution:

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

Tsconfig:

{   "compilerOptions": {     "baseUrl": "./",     "jsx": "react",     "lib": ["es5", "es6", "dom"],     "module": "commonjs",     "noImplicitAny": false,     "outDir": "./dist/",     "sourceMap": true,     "strictNullChecks": true,     "target": "es5",     "typeRoots": [       "custom_typings"     ]   },   "include": ["./src/**/*.tsx"],   "exclude": ["dist", "build", "node_modules"] } 

Answer 1

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; } 

Answer 2

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; }