在 Typescript 中导入 React 图像

Posted 2023-03-13

【中文标题】在 Typescript 中导入 React 图像

【英文标题】：React Images Import in Typescript

【发布时间】：2021-05-18 10:07:25

【问题描述】：

我已经使用 typescript 和 react 以及我自己的 webpack 配置设置了我自己的 react 项目。因此，我做错了什么或没有做错什么，我不知道是什么。

我的问题是我无法导入我的图片。

我尝试了这些指南中的解决方案，但无济于事：https://medium.com/better-programming/how-to-display-images-in-react-dfe22a66d5e7

我的设置如下：

src > 资产/组件/主题 index.tsx custom.d.ts

assets > img > Logo.png

components > components & App.tsx 的不同文件夹

Index.tsx 和 custom.d.ts 彼此相邻。

在我的 webpack 配置中，我有这个：

   test: /\.(png|svg|jpg|jpeg|gif)$/i,
   type: 'asset/resource',

在我的 custom.d.ts 文件中，我有这个：

declare module '*.jpg'
declare module '*.png'
declare module '*.jpeg'
declare module '*.gif'

我正在尝试像这样导入文件：import Logo from '../../assets/img/Logo'

我收到此错误：找不到模块 '../../assets/img/Logo' 或其对应的类型声明.ts(2307)

如果您需要更多信息，请告诉我。

谢谢！

【问题讨论】：

TS2307: Cannot find module './images/logo.png' 和 Typescript image import 的可能重复

【参考方案1】：

你的配置中有asset/resource，但说你的结构是assets/img，尝试在你的配置中将asset更改为assets，或者创建路径asset/resource。

【讨论】：

也可以将resource 更改为img。