리액트에서 서버와 통신하려면 ajax 1 질문

function App() {
  
  let [product,setProduct] = useState(data)
  let navigate = useNavigate();

  return (
  <div className="App">
   <Navbar bg="light" variant="light">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link onClick={()=>{ navigate('/') }}>Home</Nav.Link>
            <Nav.Link >Detail</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <Routes>
        <Route path="/" element={
          <>
          <div className="main-bg"></div>
      
      <div className="container">
  <div className="row">
   {
    product.map((a,i)=>{
    return(
     <Card product={product[i]} i={i}/>
    )
   })
   }
 </div>
</div>
  <button onClick={()=>{
    axios.get('https://codingapple1.github.io/shop/data2.json')
    .then((result)=>{
      /**서버에서 보낸 실질적인 data 출력 */
      console.log(result.data)
      let copy = [...product, ...result.data];
      setProduct(copy)
      })
    .catch(()=>{
      alert('서버 데이터 요청 실패')
    })  
  }}>더보기</button>
        </>

        }/>
       

        <Route path="/detail/:id" element={<Detail product={product}/>}/>
      </Routes>

    </div>
    
    
  );
}

function Card(props){
  return(
    <div className="col-md-4">
    < img src={process.env.PUBLIC_URL + '/img/sub'+(props.i+1)+'.png'} width="80%"/>
    <h5>{props.product.title}</h5>
    <p>{props.product.price}</p>
  </div>
  );
}

export default App;

이렇게 작성하였는데, 이미지가 뜨지않습니다..789번도 아닌데 이미지만 보이지 않네요 ㅠㅠ,,,왜그런걸까요..!