如何在TypeScript项目中引入图片？tsconfig配置后dist无图片

首先明确：tsconfig.json的include字段只负责指定TypeScript需要做类型检查的文件范围，完全不处理静态资源（比如图片）的拷贝或打包。你之前在include里加图片路径的操作，本质上只是让TS去检查这些图片文件（但TS对图片文件本身没有类型检查逻辑），根本不会把它们复制到dist目录，所以这个配置从一开始就方向错了。

下面分几种常见场景给出解决方案：

1. 使用Webpack构建项目（Webpack 5+） #

Webpack 5自带了Asset Modules，无需额外安装loader，直接在配置里添加规则处理图片：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource', // 会将文件拷贝到输出目录
        generator: {
          filename: 'resources/[name][ext]' // 指定输出到dist/resources目录，匹配你期望的结构
        }
      }
    ]
  },
  // 其他配置...
};

之后在TS文件中正常引入图片：

import avatar from './resources/avatar.png';
// 可直接使用变量，比如React中<img src={avatar} />

执行webpack构建后，图片会自动出现在dist/resources目录下。

2. 使用Vite构建项目 #

Vite默认支持静态资源处理，无需复杂配置：

• 在TS文件中引入图片：import banner from './resources/banner.png';
• 如果需要指定图片输出到dist/resources目录，修改vite.config.ts：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    assetsDir: 'resources' // 所有静态资源打包到dist/resources下
  }
});

执行vite build后，图片会按配置路径输出。

3. 使用Rollup构建项目 #

可以用@rollup/plugin-copy插件直接拷贝图片资源：

1. 安装插件：npm install @rollup/plugin-copy --save-dev
2. 在rollup.config.js中配置：

import copy from '@rollup/plugin-copy';

export default {
  plugins: [
    copy({
      targets: [
        { src: 'src/resources/**/*.png', dest: 'dist/resources' } // 源路径到目标路径的映射
      ],
      verbose: true // 可选，打印拷贝日志
    })
  ],
  // 其他Rollup配置...
};

执行Rollup构建时，插件会自动把指定图片拷贝到dist对应目录。

4. 无构建工具的纯TS编译场景 #

如果只用tsc编译TS文件，没有构建工具，就手动加脚本拷贝图片：
在package.json的scripts中添加构建命令：

{
  "scripts": {
    "build": "tsc && cp -r src/resources/*.png dist/resources/" // Linux/macOS
    // Windows系统改成："build": "tsc && xcopy src\\resources\\*.png dist\\resources\\ /Y"
  }
}

执行npm run build时，TS编译完成后会自动拷贝图片到dist目录。

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