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
=语法）。请参阅此处了解两种方法之间的区别：

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

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

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