背景：

上个月，我开始了一段学习的日常，但随着时间推移，结果却变成了一个全栈项目。我一直有前端经验，但这是我第一次自己搭建后端。所以，我做了一个网站的原生版本，带有静态路径，以及不可复用的变量和函数。你可以通过以下链接查看该网站的原生版本以获取更多信息：https://github.com/SolumnHere/Clone-Website-collin.edu。目前，我正尝试将前端迁移到React，后端使用Node。前端的原始页面几乎完成，而后端尚未动手。

问题：

我看了一些关于 .d.ts 的YouTube教程，发现无法像在纯净网站那样通过 import [name] from '/' 正常访问该文件，因为它们无法识别那些 .png、.mp4，或 .svg。这也是我创建 .d.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 "*.webp" {
  const src: string;
  export default src;
}
declare module "*.mp4" {
  const src: string;
  export default src;
}

据我对其工作原理的理解，我将 .d.ts 文件全局放置：

└── src/
    ├── assets/
    │   └── Resources/
    │       ├── static/
    │       ├── Video/
    │       │   └── 2026-spring-homepage.mp4
    │       ├── Locations/
    │       └── icons/
    ├── component/
    │   ├── Footer/
    │   └── Body/
    │       ├── location/
    │       ├── feature/
    │       ├── feed-section/
    │       ├── instruction/
    │       ├── Header/
    │       ├── upcoming-event/
    │       ├── quick-link/
    │       └── Gradient-banner/
    ├── style/
    ├── vite-env.d.ts
    ├── main.jsx
    ├── main.css
    └── App.tsx
├── node_modules/
├── public/
└── vite.config.js

vite-env.d.ts 文件位于 ./src 目录。我对每个模块使用通配符声明（*），以便在编译时，系统优先读取包含 .d.ts 的某些文件，从而使模块具备可复用性。若我理解有误，请指正。

然而，当我尝试从 ./Resources 导入时，它无法识别路径，显示 “[PARSE_ERROR] Unterminated string”：

import RightDownArrow from '../../../assets/Resources/icons/right-down.png';
import Logo from '../../../assets/Resources/icons/logo.png;

我尝试将 .d.ts 文件移动到 ./component 和 ./body，但都不起作用。如果这些路径无法被识别，创建一个导入文件来管理并导出变量名将变得不可行。

有人能解释 .d.ts 的位置有什么问题吗？或者我是不是对 .tsx 文件中的导入理解有误？我希望这不是我未来会问的愚蠢问题。

解决方案

在我看来，这只是一个语法错误。你在分号前忘记了闭合引号（'）。

另外请记住，declare module "*.png" 并不会让导入可重用或优先编译，它只是告诉TS，当你看到一个以 .png 结尾的导入时，将其视为一个导出字符串的模块。