如何在反应打字稿中导入webp图像答案

【问题标题】：How to import webp image in react typescript如何在反应打字稿中导入webp图像
【发布时间】：2021-04-21 06:38:33
【问题描述】：

我已经搜索了答案，但找不到任何答案
在 typescript 中导入 *.webp 中的图像时，需要声明文件，例如declaration.d.ts

里面必须提供类似后续代码的东西：

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

之后是导入方式

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

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

但是，渲染后不会显示任何图像，因为本质上导出的不是图像本身，而是[对象模块]。这可以很容易地看到

console.log(img)

在那个img模块中是要放入的路径，所以可以使用如下：

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

但我很确定， A）我以一种非常错误的方式声明，即声明中必须有更好的导出或更好的类型来针对 value 编写 B) 我以错误的方式使用导入。

因此，我对在 React TS 中处理 WebP 导入的更好方法持开放态度。非常感谢您的帮助或 rtfm 的链接。谢谢！

【问题讨论】：

【解决方案1】：

如果您尝试将 webp 图像导入为 ReactComponent，

TypeScript 会出错。所以你不应该将它作为一个组件导入，而应该只使用图像的来源。检查这个例子：

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

现在你可以像这样在你的任何标签中使用这个 src。

<img src={img} />

【讨论】：