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]',
                }
            }
        ]

应用程序.tsx ：

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

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

原文由 Cosmin SD 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

设置 Webpack 文件加载器，添加 declaration.d.ts，瞧！

在花了一些时间找出解决方案之后，这就是我所做的……

步骤1

确保您已安装 file-loader 作为开发依赖项

npm install -D file-loader ，如果你使用纱线 yarn add -D file-loader

第2步

在Webpack规则中添加文件扩展名对应的loader webpack.config.js ，像这样

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

第 3 步

在您的 index.d.ts tsconfig.json 文件，实际上您可以随意命名，但您必须按照步骤 4 操作。

由于 Webpack 现在将处理多个图像扩展，因此您可以添加 文件加载器 支持的其他图像格式

declare module '*.png';
declare module '*.jpg';

第4步

转到您的 tsconfig.json 文件并将 index.d.ts 添加到包含数组中，如下所示：

 {
  "compilerOptions": {
    ...,
    "jsx": "react",
    "esModuleInterop": true,
    "target": "ES2020",
    "moduleResolution": "node"
  },
  "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"],
  "include": ["src", "index.d.ts"] /// <-- Like this!!
}

请注意，如果您尚未定义 include 数组，则默认情况下打字稿将添加根文件夹中的所有文件，如果您只定义一个文件而不是包含所有代码的文件不会编译。我认为将所有代码都放在 src 文件夹中是一个好习惯。

瞧！！

原文由 Carlos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

或者，在您的 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）。请参阅 此处 了解两种方法之间的区别：

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

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

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

原文由 Erik Vullings 发布，翻译遵循 CC BY-SA 4.0 许可协议