使用TypeScript给HTML页面加头部时，img src无法识别怎么办？

问题详情 #

用TypeScript为多个HTML页面添加头部时，动态创建的img标签无法加载图片，浏览器报错：Cannot GET /src/main/resource/img/logo.png。

代码片段 #

const logoImage: HTMLImageElement = document.createElement('img');
logoImage.classList.add('h-10', 'w-10', 'inline-block');
logoImage.src = "./resource/img/logo.png"

目录结构 #

|-- html
|   |-- index.html
|-- resource
|   |-- img
|       |-- logo.png
|-- ts
|   |-- index.ts
|   |-- navbar.ts

技术栈 #

• HTML
• Node.js
• Webpack
• Tailwind/SCSS/SASS
• TypeScript

已尝试路径：src/main/resource/img/logo.png、../resource/img/logo.png，均无效；TypeScript不支持\作为路径分隔符。

解决方案 #

1. 利用Webpack静态资源处理（推荐） #

Webpack会对引入的静态资源进行打包和路径映射，这是最可靠的方式：

• 配置Webpack图片规则
  在webpack.config.js中添加图片处理规则，确保图片被打包到输出目录：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif)$/i,
          type: 'asset/resource',
          generator: {
            filename: 'resource/img/[name].[hash][ext]' // 定义输出路径和文件名
          }
        }
      ]
    }
  };
  

• 在TS中正确引入图片
  通过ES模块导入图片，Webpack会自动替换为打包后的正确路径：

  // 导入图片资源
  import logoSrc from '../resource/img/logo.png';
  
  const logoImage: HTMLImageElement = document.createElement('img');
  logoImage.classList.add('h-10', 'w-10', 'inline-block');
  logoImage.src = logoSrc; // 使用导入的变量作为src
  

• 处理TypeScript类型报错
  如果TS提示找不到图片模块，新建typings/images.d.ts类型声明文件：

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

  并在tsconfig.json中包含该声明文件：

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

2. 基于HTML文件位置写相对路径（仅适用于未打包场景） #

如果不需要Webpack处理图片，确保路径是相对于html/index.html的位置：

logoImage.src = "../resource/img/logo.png";

注意：这种方式在Webpack打包后可能失效，因为输出目录结构会变化，仅适合开发阶段临时测试。

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