React+TypeScript开发Chrome扩展导入图片遇TS2307错误求助

1. 修复TS2307模块找不到错误 #

TypeScript默认不识别图片文件类型，需手动添加类型声明：

• 在src目录下新建types/images.d.ts文件，写入：

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

• 确保tsconfig.json的include字段覆盖该类型文件，示例配置：

{
  "include": ["src/**/*"]
}

2. 配置Rollup处理图片资源 #

ts-extension-starter基于Rollup，默认不处理静态资源，需添加插件完成图片打包：

• 安装依赖：

npm install @rollup/plugin-url --save-dev

• 修改rollup.config.js，引入并配置插件：

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

export default {
  // 保留原有配置
  plugins: [
    // 原有插件（如typescript、react相关插件）
    url({
      include: ['**/*.png'],
      limit: 0, // 不转base64，直接复制到输出目录；若需小图转base64可设为字节数（如8192）
      destDir: 'dist', // 与你的扩展打包输出目录保持一致
      publicPath: '.' // 确保扩展内路径能正确解析
    })
  ]
};

3. 正确导入并使用图片 #

在React组件中用ES模块方式导入图片：

import introImg from '../img/intro.png';

function MyComponent() {
  return <img src={introImg} alt="Intro" />;
}

常见排查点 #

• 确认图片路径正确性：比如组件在src/components/xxx.tsx，图片在src/img/intro.png，../img/intro.png是正确路径。
• 检查Rollup打包后dist目录下是否存在目标图片，若不存在需调整url插件的destDir配置。

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