Vite-react-app从assets文件夹导入图片报错求助

• 确认导入路径准确性

  • 相对路径需与文件层级匹配，如在src/components下的组件导入图片，路径应为../assets/xxx.png；也可使用根目录绝对路径/src/assets/xxx.png。
  • 注意文件名大小写，Vite对路径大小写敏感，即使Windows系统不区分，也要保证导入路径与实际文件名完全一致。

• 配置Vite路径别名（优化路径管理）
  在vite.config.js中添加别名配置，简化导入路径：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  import path from 'path'
  
  export default defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    }
  })
  

  若使用TypeScript，需在tsconfig.json（或jsconfig.json）中补充路径提示：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"]
      }
    }
  }
  

  配置后即可用@/assets/xxx.png格式导入图片。

• 处理动态导入场景
  若通过变量拼接路径导入图片，需用new URL()让Vite正确解析路径：

  const imgUrl = new URL(`../assets/${imgName}.png`, import.meta.url).href;
  

• 清除缓存重启项目
  删除node_modules/.vite缓存文件夹，再执行npm run dev重启开发服务，避免缓存导致的路径解析异常。

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