TS2307：找不到模块“./images/logo.png”

Posted 2023-02-22

【中文标题】TS2307：找不到模块“./images/logo.png”

【英文标题】：TS2307: Cannot find module './images/logo.png'

【发布时间】：2019-11-29 08:13:18

【问题描述】：

我正在尝试将本地 png 图像导入到我的 ts webpack 项目中，我收到以下错误。

TS2307: Cannot find module './images/logo.png'.

我所有其他模块都可以正常导入，即；我的 css、svg 和 ts 文件。它似乎只发生在 png 上。

我的 webpack.config.js 模块部分

module: 
    rules: [
      test: /\.ts$/,
      use:['ts-loader']
    ,
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    ,
      test: /\.(woff|woff2|eot|ttf|svg)$/,
      use: ['url-loader?limit=100000']
    ,
      test: /\.png$/,
      use: ['file-loader']
    ]
  

我的 tsconfig.json

  "compilerOptions": 
    "outDir": "./dist/",
    "sourceMap": true,
    "module": "CommonJS",
    "target": "ES5",
    "lib": ["DOM", "ES2015.Promise", "ES5"],
    "allowJs": true,
    "alwaysStrict": true
  

我的进口声明

import Logo from './images/logo.png';

我的文件结构

root
-src
--css
--images
---logo.png
--index.ts
--templates.ts
-package.json
-tsconfig.json
-webpack.config.js

【问题讨论】：

Typescript image import的可能重复

***.com/a/59139251/9349388 这个解决方案对我有用。我遇到的问题是一样的。

【参考方案1】：

我的错误是我排除了参考 react-app-env.d.ts：

/* eslint-disable spaced-comment */
/// <reference types="react-scripts" />

Eslint 推动我这样做是因为间隔评论规则。

希望这对某人有所帮助。

【参考方案2】：

我在这里找到了答案。 Webpack & Typescript image import

这就是我所做的。

添加了一个新目录和一个 import-png.d.ts 文件

root
-typings
--custom
---import-png.d.ts

导入-png.d.ts

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

将我的文件加载器模块更改为：

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

现在我可以用这样的语句导入：

import Logo from './images/logo.png'

【讨论】：

PS，value 应该是string。