TypeScript配置paths路径别名后无法导入svg/png图片怎么办

静态资源导入失效由3个常见问题共同导致：

• tsconfig.json中static别名规则配置错误，缺少通配符匹配项，无法命中static/xxx/xx.png这类带子路径的导入
• TypeScript默认不识别png、svg等非代码资源的导入类型，会报类型错误
• tsconfig的paths规则仅服务于TS类型检查/推导环节，Vite、Webpack等构建工具不会自动读取该配置，构建/运行时会出现模块找不到的报错

1. 修正tsconfig的paths别名规则 #

参考现有@components、@app的配置格式，为static添加带*通配符的匹配规则，同时明确相对baseUrl的路径前缀：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["./src/components/*"],
      "@components": ["./src/components"],
      "@app/*": ["./src/app/*"],
      "static/*": ["./static/*"],
      "static": ["./static"]
    }
  }
}

2. 添加静态资源类型声明 #

在src目录下新建被TS配置include覆盖的声明文件（比如global.d.ts/assets.d.ts），添加以下内容，让TS识别各类静态资源的导入：

declare module '*.png' {
  const src: string;
  export default src;
}
declare module '*.jpg' {
  const src: string;
  export default src;
}
declare module '*.jpeg' {
  const src: string;
  export default src;
}
declare module '*.gif' {
  const src: string;
  export default src;
}
declare module '*.svg' {
  const src: string;
  export default src;
}
declare module '*.webp' {
  const src: string;
  export default src;
}

3. 同步构建工具的别名配置 #

根据你使用的构建工具，添加同名别名配置，保证运行/构建时路径能被正确解析：

• 若使用Vite，在vite.config.ts中添加配置：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, './src/components'),
      '@app': path.resolve(__dirname, './src/app'),
      static: path.resolve(__dirname, './static')
    }
  }
});

• 若使用Webpack，在webpack.config.js中添加配置：

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@app': path.resolve(__dirname, 'src/app'),
      static: path.resolve(__dirname, 'static')
    }
  }
};

配置完成后，重启TS服务（VS Code可通过命令面板执行TypeScript: Restart TS Server）、重启开发服务，原有导入写法即可正常工作：

import imageAdd from "static/images/image-add.png";
import circleIcon from "static/icons/circle-close.svg";

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