Importation d'images typographiques

Question

J'ai trouvé une solution ici: Importation d'image Webpack et TypeScript

Mais je reçois une erreur pour cela:

[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'.

Je suppose que j'ai besoin de lancer l'importation d'une manière ou d'une autre, mais je ne sais pas comment. Je fais cela dans React. J'ai vu que l'attribut src est défini comme string | undefined, c'est pourquoi l'erreur apparaît.

Voici le code:

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

HTML:

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

Et définition basée sur la solution mentionnée ci-dessus:

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

L'une des façons de se débarrasser de cette erreur consiste à modifier le fichier d.ts comme suit:

declare module "*.png"

retirer

{
  const value: string;
  export default value;
}

ou bien vous pouvez faire:

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

Mise à jour

La meilleure solution avec la vérification de type est:

declare module "*.png" {
   const value: any;
   export = value;
}