React页面Navbar正常显示但Hero组件无法渲染的问题求助

问题说明 #

在React项目中，Navbar.jsx组件可正常显示，但Hero.jsx组件无法在App.jsx主页面渲染。已按照导入Navbar的相同方式导入Hero组件，但问题仍存在。

可正常显示的Navbar.jsx代码 #

import React from 'react'

const Navbar = () => {
  return (
    <div className='w-full h-[80px] bg-white border-b fixed'>
      <div className='max-w-[1480px] w-full h-full m-auto flex justify-between items-center'>
    <h1 className='font-semibold  m-auto text-3xl text-[#20B486]'>Practice</h1>
    <div >
    <ul className='flex gap-9 ' >
          <li className='text-[#6D737A] hover:text-[#20B486]' ><a href='#'>Home</a></li>
          <li className='text-[#6D737A] hover:text-[#20B486]'><a href='#'>About</a></li>
          <li className='text-[#6D737A] hover:text-[#20B486]'><a href='#'>Support</a></li>
          <li className='text-[#6D737A] hover:text-[#20B486]'><a href='#'>Platform</a></li>
          <li className='text-[#6D737A] hover:text-[#20B486]'><a href='#'>Pricing</a></li>
    </ul>
    </div>

<div className='m-auto '>

  <button className='text-[#6D737A]   w-[168px] h-[48px] rounded-xl  hover:text-[#20B486]'> 
  Log in </button> 
  
  <button className='bg-[#20B486]   w-[128px] h-[38px] rounded-xl  text-white text-sm   hover:bg-[#6D737A]'> Sign Up for Free </button>
    </div>
    
    
    
    </div>
    <div className='w-full bg-white   py-24'>
      <div className='max-w-[1480px] h-[99px]  m-auto grid grid-cols-2 pr-20 pl-20 align-items: center'> 
      <div>
      <h1 className='  text-[#20B486] font-medium  text-lg tracking-wide text-center pr-20'> START TO SUCCESS </h1> <br></br>
      <h1 className=' font-normal text-black text-4xl text-left pl-48 font-[520] ' > Access To<h1 className='text-[#20B486] inline-flex pl-2 pr-2 '>   5000+  </h1>Courses <br></br> from <h1 className='text-[#20B486] inline-flex pl-2 pr-2'>  300 </h1>Instructors  <br></br>& Institutions </h1> <br></br>
      <p className='text-[#52565C]  text-xs text-center  pl-40 pr-8'> Various versions have evolved over the years,sometimes by accident,</p>
      <br></br>




      <div class="mb-3">
  <div class="relative mb-4 flex w-full pl-48 flex-wrap items-stretch">
    <input
      type="search"
      class="relative  m-0 block w-[1px]  h-14 min-w-0 flex-auto  shadow-md border-solid border-neutral-300 bg-transparent bg-clip-padding px-5 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none  dark:text-neutral-200 [#000000]:placeholder:text-neutral-200 "
      placeholder="What do you want to learn?"
      aria-label="Search"
      aria-describedby="button-addon2" 
       />
       <span
      class="input-group-text flex items-center whitespace-nowrap rounded px-3 py-1.5 text-center text-base font-normal text-neutral-700 [#000000]:text-neutral-200 shadow-md "
      id="basic-addon2">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
          clip-rule="evenodd" />
      </svg>
    </span>
  </div>
</div>
    




      </div>
  <div> 
 <div className=' inline-flex rounded-lg -rotate-6 pl-2' > 

   <img src="../src/assets/hero.jpg" /> 
    </div>
    <div className=' inline-flex rounded-lg pr-2 rotate-12'> 
   <img  src="../src/assets/hero2.jpg" /> 
</div> 
  </div>



</div>

      </div>
      
      <div> 

        




      </div>


       </div>  

       
    
            
  
  )
}

export default Navbar

无法显示的Hero.jsx代码 #

import React from 'react'

const Hero = () => {
  return (
   <div> 
    <img src="../assets/images/hero.jpg" alt="hero" />
   </div>
  )
}

export default Hero 

App.jsx代码 #

import React from 'react';
import { Hero, Navbar } from './components';

const App = () => {
  return (
    <div>
      <Navbar />
    <Hero />
      
    </div>

     
  )
}

export default App

components目录下的index.js代码 #

import Navbar from "./Navbar";
import Hero from "./Hero";

export{ Hero, Navbar }

排查与解决方法 #

1. 图片路径错误
   Hero组件中图片路径为../assets/images/hero.jpg，但Navbar使用的是../src/assets/hero.jpg，需确认项目中图片实际位置。Create React App项目推荐两种方式：

   • 将图片放入public/assets目录，使用绝对路径：src="/assets/images/hero.jpg"
   • 将图片放入src/assets目录，通过import导入：

     import heroImg from '../assets/images/hero.jpg';
     
     const Hero = () => {
       return (
        <div> 
         <img src={heroImg} alt="hero" />
        </div>
       )
     }
     

2. 被固定导航栏遮挡
   Navbar使用了fixed定位，会覆盖下方元素。给Hero组件添加顶部边距，避开导航栏高度：

   const Hero = () => {
     return (
      <div className='mt-[80px]'> 
       <img src="../assets/images/hero.jpg" alt="hero" />
      </div>
     )
   }
   

3. 组件命名/导出导入问题
   检查Hero组件文件名是否为Hero.jsx（注意大小写，React对文件名大小写敏感），以及components/index.js是否正确导出Hero组件。

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