Vite+React+TypeScript中assets背景图导入失败的解决问询

1. 修复TypeScript类型声明缺失问题 #

TS无法识别图片模块类型，导致优先指向Vite的默认类型声明文件。在项目的src目录下新建assets.d.ts文件，添加以下类型声明：

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

// 按需添加其他图片格式的声明
declare module '*.jpg' {
  const value: string;
  export default value;
}

添加后，TS会正确解析图片导入模块，不再跳转到node_modules\vite\client.d.ts。

2. 确认Vite配置（可选） #

Vite默认支持Assets目录下的资源导入，若你的目录结构特殊，可在vite.config.ts中显式指定资源格式：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  assetsInclude: ['**/*.png', '**/*.jpg']
})

3. 验证路径与容器样式 #

• 检查图片相对路径是否正确：比如Home组件在src/pages/Home.tsx，图片在src/assets/Backg.png，../assets/Backg.png的路径是正确的，否则根据目录层级调整。
• 确保容器有足够宽高：背景图需要容器有尺寸才能显示，可给div添加基础样式：

return <div style={{
  backgroundImage: `url(${image1})`,
  width: '100vw',
  height: '100vh',
  backgroundSize: 'cover'
}}>
  <h1>Text</h1>
</div>;

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