Webpack url-loader无法加载JPG图片，遇TS2307错误求助

我来帮你拆解一下问题的根源，以及对应的解决办法：

一、先搞定TypeScript的TS2307错误 #

TypeScript本身只认识JavaScript/TypeScript模块，对于.jpg这类静态资源，它不知道导入后会得到什么，所以会抛出"无法找到模块"的错误。解决这个很简单：

• 在你的项目里创建一个类型声明文件，比如src/types/image.d.ts，内容如下：

declare module '*.jpg' {
  const src: string;
  export default src;
}

declare module '*.jpeg' {
  const src: string;
  export default src;
}

• 然后打开tsconfig.json，确保include数组包含这个声明文件的路径，比如：

{
  "include": [
    "src/**/*",
    "src/types/**/*" // 对应你放声明文件的目录
  ]
}

这样TypeScript就知道导入.jpg文件时会得到一个字符串（图片的访问路径或base64编码），错误就会消失。

二、解决图片损坏的问题 #

图片损坏大概率是Webpack配置里没正确处理JPG格式，或者导入方式有问题，按下面的步骤检查：

1. 检查Webpack的url-loader规则 #

打开你的Webpack配置文件，找到module.rules部分，确保处理图片的规则包含了.jpg和.jpeg：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...其他规则（比如TS/JS编译）
      {
        test: /\.(png|jpg|jpeg|gif)$/i, // 这里必须包含jpg/jpeg！
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 小于8KB的图片转base64，超过的话自动用file-loader输出文件
              name: '[name].[hash:8].[ext]', // 输出的图片文件名格式
              outputPath: 'assets/images/', // 图片输出到打包目录的哪个文件夹
              publicPath: 'assets/images/' // 页面中引用图片的基础路径
            }
          }
        ]
      }
    ]
  }
};

你之前PNG正常，很可能是规则里只写了png，漏掉了jpg，导致JPG没被url-loader处理，打包后路径错误或者文件没正确生成。

2. 确保依赖安装完整 #

url-loader在处理超过limit大小的图片时，会依赖file-loader作为 fallback，所以要确保这两个loader都安装了：

npm install url-loader file-loader --save-dev

3. 调整导入方式 #

你现在用的是import * as map from '../../../i/map.jpg';，更标准的写法是默认导入：

import map from '../../../i/map.jpg';

因为我们在类型声明里用的是export default src，默认导入能正确拿到图片的路径，避免因导入方式错误导致路径异常，进而图片无法加载。

最后验证 #

重新执行Webpack构建，应该既不会有TS错误，图片也能正常显示了。

内容的提问来源于stack exchange，提问作者Pavel Morozov