reactjs - Webpack 和 Typescript 图片导入

Question

我正在开发一个 React 应用程序并使用 Webpack 和 Typescript。我想在 <img/> 之一中使用图像标签。但是，我没有找到访问图像文件的正确方法。

webpack.config.js:

 ...
 module: {
        rules: [
            ...
            {
                test: /\.(png|jpe?g|svg)$/,
                loader: 'file-loader',
                options: {
                    name: 'assets/[name].[ext]',
                }
            }
        ]

app.tsx:

...
render() {
    return <img src='/assets/logo-large.png' alt="logo"/>
}

运行应用程序时，assets/logo-large.png找不到资源。

Answer 1

或者，在您的 custom_typings 文件夹中(如果有的话)，您可以添加一个新的 import-png.d.ts 文件:

declare module "*.png" {
  const value: any;
  export default value;
}

因此您可以使用以下方式导入图像:

import myImg from 'img/myImg.png';

或者，正如@mario-petrovic 所报告的，您有时需要使用不同的导出选项，如下所示(export = syntax)。参见 here两种方法的区别:

declare module "*.png" {
  const value: any;
  export = value;
}

在这种情况下，您可能需要将图像导入为:

import * as myImg from 'img/myImg.png';