我正在尝试使用 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 标签中使用导入,如下所示:
<img src={ kittenHeader } />
注意:提供了 webpack.config.js 和 App.tsx 的全文,直到我更接近答案并意识到它们不相关(请参阅更新 1)。
我假设我在导入中的相对路径方面犯了一些非常微不足道的错误。正如您可以想象的那样,我尝试了各种替代方案。
谁能提供一些见解?
仅供引用,因为我不断遇到与错误版本的 webpack 相关的文章和问题,以下是我的版本:
- react 15.5.4
- Webpack 2.6.1
- Webpack-dev-server 2.4.5
- TypeScript 2.3.2
所以,看看 this SO question和this post on Medium ,我已经能够确定问题不在于我如何使用 webpack,而在于我正在使用 TypeScript。该错误是 typescript 错误,因为 typescript 编译器不知道 .jpg 文件是什么。
显然,我需要提供 d.ts 文件或使用 require 语句。
快到了...
最佳答案
对于常规要求,这就是我在 tsx 文件中使用它的方式:
const logo = require('../assets/logo.png');
...
<img alt='logo' style={{ width: 100 }} src={String(logo)} />
希望这有帮助。 导入
对我来说也不起作用。
关于reactjs - 使用 React、Typescript 和 Webpack 显示静态图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44312170/