如何在react typescript中导入webp图像

Question

我已经搜索了答案，但找不到任何
在*中导入图像时。webp在typescript中需要声明文件，例如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)我以一种非常错误的方式声明，即必须有一个更好的输出声明或更好的类型来编写值B)我使用import的方式不对。

所以我对在React TS中处理WebP导入的更好方法持开放态度。从您的帮助或链接到rtfm将不胜感激。谢谢你！

Answer 1

如果你试图导入webp， TypeScript会给出一个错误ReactComponent． 所以你不应该把它作为一个组件导入，而应该只使用源代码的形象。检查这个例子:

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

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

<img src={img} />

Answer 2

实际上你必须使用

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

和

<img src={img.src} />

是这样的

Answer 3

如何设置图片文件夹

创建一个名为images的根文件夹。然后，TSX创建一个由所有文件组成的图像对象。这样我就可以导入Imageconst并在一个组件文件中访问多个图像

import PlaceHolder from '../images/placeholder.jpg';
import LogoLrgTag from '../images/new-logo-lrg-tag.svg';
import LogoLrg from '../images/new-logo-lrg.svg';
import LogoVTag from '../images/new-logo-v-tag.svg'
import LogoV from '../images/new-logo-v.svg';
import LandscapePH1 from '../placeholders/placeholder-landscape-1.png';
import LandscapePH2 from '../placeholders/placeholder-landscape-2.png';
import LandscapePH3 from '../placeholders/placeholder-landscape-3.png';
import SearchIcon from '../images/search-icon.webp';

const Image = {
PlaceHolder,
LogoLrgTag,
LogoLrg,
LogoVTag,
LogoV,
LandscapePH1,
LandscapePH2,
LandscapePH3,
SearchIcon
}
export default Image;

那么我就可以调用我的组件:

import Image from '../../../assets/images/Image'; //import object
<Button
variant='outlined'
onClick={() => {
alert('do the thing!')
}}
>
<img src={Image.SearchIcon} alt='search-icon'/>
Help
</Button>