在 react.js 中缓存图像然后图像不出现

Question

I was planning to upload my React.js website into GitHub. then I enter npm cache clean --force into the terminal and then now all my image is in cache image. none of my images is loading up but the other information and animation are still working. how do I fix this problem? thanks

the images is under className='navbar-container container location.

import React, { useState, useEffect  } from 'react'
import {Link} from 'react-router-dom'
import {FaBars, FaTimes} from 'react-icons/fa'
import { Button } from './Button'
import './Navbar.css'
import {IconContext} from 'react-icons/lib'

function Navbar() {
    
    const [click,setClick]= useState(false);
    const [button,setButton]= useState(true)

    const handleClick = () => setClick(!click);
    const closeMobileMenu = () => setClick(false)

    const showButton = () => {
        if (window.innerWidth <= 960){
            setButton(false)
        } else {
            setButton(true) 
        }
    };

    useEffect(() => {
        showButton();
      }, []);

    window.addEventListener('resize',showButton);
    return (
        <>
        <IconContext.Provider value ={{color: "#fff"}}>
        <nav className='navbar'>
          <div className='navbar-container container'>
            <Link to='/' className='navbar-logo' onClick={closeMobileMenu}>
              <img src="/images/UOWMKDU-logb.png" 
              alt="UOWKDU Logo" width="35%" height="85%"  className='navbar-icon' />
              
              
            </Link>
            <div className='menu-icon' onClick={handleClick}>
              {click ? <FaTimes /> : <FaBars />}
            </div>
            <ul className={click ? 'nav-menu active' : 'nav-menu'}>
              <li className='nav-item'> 
                <Link to='/' className='nav-links' onClick={closeMobileMenu}>
                  Home
                </Link>
              </li>
              <li className='nav-item'>
                <Link
                  to='/service'
                  className='nav-links'
                  onClick={closeMobileMenu}
                >
                  Services
                </Link>
              </li>

              <li className='nav-btn'>
                {button ? (
                  <Link to='/sign-up' className='btn-link'>
                    <Button buttonStyle='btn--outline' >SIGN UP</Button>
                  </Link>
                ) : (
                  <Link to='/sign-up' className='btn-link' onClick={closeMobileMenu}>
                    <Button
                      buttonStyle='btn--outline'
                      buttonSize='btn--mobile'
                    >
                      SIGN UP
                    </Button>
                  </Link>
                )}
              </li>
            </ul>
          </div>
        </nav>
        </IconContext.Provider>
        </>
    )
}


export default Navbar

Answer 1

Fixed:

I recreate an new react.js folder and copy and paste the old one to the new one. because of packages.json have some issues. i think it might be some packages missing. but after make a new react.js file and copy and paste back. everything is fine