import avatar from '@img/avatar.png' 找不到模块“@img/avatar.png”或其相应的类型声明。ts-plugin(2307)

在Vue 3中使用TypeScript时，遇到`import avatar from '@img/avatar.png'`这样的导入语句报错，是因为TypeScript默认不会识别非代码资源（如静态资产），比如图片文件。要解决这个问题，你需要按照以下步骤操作：

1. **手动声明模块**[^1]:
在你的项目中，找到图片文件`@img/avatar.png`所在的目录下，创建一个名为`images.d.ts`的类型定义文件。在这个文件里，为图片路径提供类型声明：

   declare module '@img/avatar.png' {
     const src: string;
     export default src;
   }

2. **引入并使用**:
现在可以在TypeScript组件中安全地导入并使用图片路径，就像这样：

   import avatarSrc from '@/img/avatar.png';
   // 或者直接使用变量名
   const avatar = '@/img/avatar.png';

   <img :src="avatarSrc" /> // 或者 <img :src="avatar" />

请注意，这种方式适用于相对路径，如果图片位于静态文件（static）目录内，路径可能会有所不同。