如何在react typescript中导入webp图像

Question

我已经搜索过答案，但找不到答案
当在打字稿中导入 *.webp 中的图像时，需要声明文件，例如声明.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 的链接。谢谢！

Answer 1

如果您尝试将

webp 图像导入为 ReactComponent，TypeScript 会出错。因此，您不应该将其作为组件导入，而应仅使用图像的source。检查这个例子：

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 的根文件夹，然后创建一个由所有文件组成的图像对象。这样我就可以导入

Image

const 并访问一个组件文件中的多个图像

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>