Typescript 图片导入

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

I created the index.d.ts and added 'declare module "*.jpg"' it didn't work but when I changed the name to custom.d.ts (or any other name) it worked fine.

Answer 3

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