如何在react中导入webp图片 typescript

Question

I have searched the answer, but couldn't find any
When importing an image in *.webp in typescript there is a need for declaration file, eg declaration.d.ts

In there must be provided something similar to follow up code:

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

After it, the import method is

import * as img from "path/to/image/img.webp"

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

However, after the render no image will show up, because what is essentially exported is not an image itself but an [object Module]. Which can be easily seen with this

console.log(img)

In that img module is the path to put in, so the following can be used:

<img src={img.default} alt="404"/>

But I'm pretty certain, A) I am declaring in a very wrong way, ie there must be a better export in declaration or better type to be written against value B) I am using import in a wrong way.

So I am open for the better ways to deal with WebP import in React TS. Help from you or links to rtfm will be much appreciated. Thank you!

Answer 1

TypeScript gives an error if you try to import webp image as ReactComponent . So you should not import it as a component, but use only the source of image. Check this example:

import img from "./images/image.webp";

Now you can use this src in any of your tag like this.

<img src={img} />

Answer 2

In fact you have to use

import img from "./images/image.webp";

and then

<img src={img.src} />

this way it works