React Vite导入assets目录图片报错：路径解析失败求助

错误原因 #

你用的import {logo} from '../assets'导入方式有问题，因为../assets是一个目录，Vite没法直接把目录当成模块解析，除非这个目录里有index.js（或index.ts）专门导出资源。

解决方案 #

方案1：直接导入具体图片文件 #

假设你的logo是src/assets/logo.png（根据实际文件名调整），直接导入该文件即可：

import React from 'react';
import logo from '../assets/logo.png' // 改为具体文件路径
const Navbar = () => {
  return (
    <div className='w-full h-[80px] bg-white border-b'>
      <div className='max-w-[1480px] m-auto w-full h-full flex justify-between items-center'>
       <img src={logo} alt="logo" />
      </div>
    </div>
  )
}

export default Navbar

方案2：通过目录index文件导出资源 #

如果想保留import {logo} from '../assets'的写法，需要在src/assets目录下创建index.js文件，内容如下：

// src/assets/index.js
export { default as logo } from './logo.png'; // 替换为你的logo实际文件名

之后你原来的组件代码就能正常运行了。

额外检查点 #

• 确认图片确实在src/assets目录下，文件名（包括大小写）和导入路径完全一致（Vite对文件名大小写敏感）。
• 组件路径没问题：Navbar.jsx在src/components下的话，../assets的路径是正确的，不用调整。

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