TS2307:找不到模块“./images/logo.png" [英] TS2307: Cannot find module './images/logo.png'

问题描述

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

I'm trying to import a local png image into my ts webpack project, and I get the following error.

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

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

All my other modules are importing just fine, ie; my css, svg and ts files. It only seems to happen with png.

我的 webpack.config.js 模块部分

My webpack.config.js modules section

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

My 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

推荐答案

我在这里找到了答案.Webpack &打字稿图像导入

这就是我所做的.

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

Added a new directory and a import-png.d.ts file

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

导入-png.d.ts

import-png.d.ts

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

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

changed my file-loader module to this:

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

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

and now I can import with a statement like this:

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

这篇关于TS2307:找不到模块“./images/logo.png"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！