Reactjs 使用React、Typescript和Webpack显示静态图像

我正在尝试使用webpack和webpack dev server在React组件中显示图像，作为项目的一部分

到目前为止，我已经完成了以下步骤：

• 使用npm安装文件加载器
• 更新webpack.config.js以添加图像文件的加载程序
• 已将所需的图像导入到我的组件中
• 在我的img标签中使用导入

采取这些步骤后，webpack无法编译，出现“找不到模块”错误：

ERROR in [at-loader] ./src/components/App.tsx:4:26
    TS2307: Cannot find module '../images/kitten-header.jpg'.

我的文件夹结构如下：

/dist
   /images
      kitten-header.jpg
   bundle.js
   bundle.js.map
/node_modules
   (content ignored for brevity)
/src
   /components
      App.tsx
   /images
      kitten-header.jpg
   /styles
      App.less
   index.tsx
index.html
package.json
tsconfig.json
webpack.config.js 

我添加到webpack.config.js的新加载程序是：

test: /\.(jpe?g|gif|png|svg)$/, loader: "file-loader?name=./images/[name].[ext]"

我在App.tsx中导入了图像文件，如下所示：

import kittenHeader from '../images/kitten-header.jpg';

<img src={ kittenHeader } />

…并在img标记中使用导入，如下所示：

import kittenHeader from '../images/kitten-header.jpg';

<img src={ kittenHeader } />

注意：webpack.config.js和App.tsx的全文都是提供的，直到我稍微接近答案，意识到它们不相关（见更新1）

我假设我在导入中的相对路径方面犯了一些非常小的错误。你可以想象，我已经尝试过各种各样的选择

有人能提供一些见解吗

作为参考，由于我不断点击与错误版本的webpack相关的文章和问题，以下是我的版本：

• 反应15.5.4
• 网页2.6.1
• 网页包开发服务器2.4.5
• 打字稿2.3.2

---

更新1:2017.06.05
所以，通过观察和，我发现问题不在于我如何使用webpack，而在于我使用的是TypeScript。该错误是由于typescript编译器不知道.jpg文件是什么而导致的typescript错误

显然，我需要提供一个d.ts文件或使用require语句

---

差不多到了…

错误，

TS2307:找不到模块“../images/kitten header.jpg”

，突出显示TypeScript编译器不理解.jpg文件的导入

尽管存在编译错误，但已成功将图像文件复制到dist文件夹，这证明了webpack配置良好

有两种方法可以解决这个问题

首先，我们可以使用'require'语句绕过TypeScript导入。为此，导入

import kittenHeader from '../images/kitten-header.jpg';

…可以替换为一个require

const kittenHeader = require('../images/kitten-header.jpg');

…这就是我们所需要的

注意就我而言，我还需要安装一些打字机来支持“require”语句。没有这些，我得到了一个

TS2304:找不到name'require'

错误

最初我使用的是

@types/node

，如中所述，但@EvanSebastian指出node旨在支持编写NodeJS模块，这不是我正在做的（请参阅对问题的评论）

---

我按照建议尝试了

@types/webpack env

，但这导致了

TS2322:Type'{src:{}；}'不可分配给Type'HTMLProps'。

针对图像标记的src属性出错

最近，我改用了

@types/requirejs

，我希望它足够集中，以避免包含大量不适当的额外类型。它目前正在工作：

npm install @types/requirejs --save-dev

---

或者，我们可以保留导入，并提供一个

d.ts

文件，其中包含声明适当模块的类型信息。我无法准确地发现此文件的外观。

我就是这样使其工作的：

// This declaration can be move in some common .d.ts file, will prevent tslint from throwing error
declare function require(path: string);

const SampleComponent = () => (
  <div>
    <img src={require('./styles/images/deadline.png')} alt="Test" />
  </div>
);

//此声明可以在某些公共.d.ts文件中移动，以防止tslint抛出错误
声明函数require（路径：字符串）；
常量SampleComponent=（）=>(
);

---

您在回答中提出的方法最终将为放置在组件中的每个图像文件编写模块声明。

对于常规要求，我在tsx文件中就是这样使用它的：

const logo = require('../assets/logo.png');

...

<img alt='logo' style={{ width: 100 }} src={String(logo)} />

const logo=require（'../assets/logo.png'）；
...

---

希望这有帮助<代码>导入ing对我也不起作用。

除了mcku的答案，您还可以通过以下方式使用导入：

// @ts-ignore
import * as kittenHeader from '../images/kitten-header.jpg';
...
<img alt='logo' style={{ width: 100 }} src={logo} />

/@ts忽略
从“../images/kitten header.jpg”导入*作为kitteheader；
...

---

尽管您必须忽略该警告。

在src目录中的任何位置添加一个typescript定义文件（将其命名为image.d.ts） 导出jpeg文件的模块定义，如下所示：

export module "*.jpg";

---

在任何想要的React-Typescript组件中尝试我的代码

import * as logo from './assests/icon.jpg';

const img = logo.default;

const Comp = ()=> {
    return <img src={img} alt="image" className="" />
}

import*作为“./assests/icon.jpg”中的徽标；
const img=logo.default；
常数Comp=（）=>{
返回
}

您是否有一个我们可以用来重现问题的源存储库？这将非常方便。如果您使用的是webpack，您可以安装

@types/webpack env

，而不是

require

，而不是

import

。与导入不同，传递给

require

的字符串不会通过TypeScript解析。当然，使用

*.d.ts

是可以的，tooThank you@EvanSebastian，你的评论就在我写答案的时候出现了。正如你所看到的，我的回答是不完整的。你知道如何为jpg写d.T吗？是否可以创建一个模块来覆盖*.jpg，或者每个图像文件都需要一个d.ts？我还注意到您推荐了

@types/webpack env

，而我使用了

@types/node

。节点类型确实有效。这两者在“需要”工作方面有什么区别？我假设它们只是相同底层“require”实现的两个d.ts定义？

@types/webpack env

和

@types/node

是不同的，当您需要编写NodeJS模块以提供标准库类型时，可以使用

@types/node

<代码>@types/webpack env在Web包捆绑项目中使用。例如，

require。如果您使用
@types/webpack env，请确保
将可用。只回答代码是不明智的。