如何解决如何在反应打字稿中导入 webp 图像
我已经搜索了答案,但没有找到
在打字稿中导入 *.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 的链接。谢谢!
解决方法
如果您尝试将 webp 图像导入为 ReactComponent,
TypeScript 会出错。因此,您不应将其作为组件导入,而应仅使用图像的来源。检查这个例子:
import img from "./images/image.webp";
现在你可以像这样在你的任何标签中使用这个 src。
<img src={img} />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。