public 이미지 경로 문제//엑박떠요 ㅠㅠ

[장준혁]

안녕하세요!

코딩 독학하다가 도저히 혼자 해결이 안되어서 도움 요청드립니다..

public/image/~~~~
~~여기에 이미지를 다 저장해놓고

const Sidebar = () => {
  return (
    <div className='sidebar'>
      <div className="top">
        <Link to= "/" style={{textDecoration:"none"}}>
          <span className="logo">
          
          </span>
        </Link>

이미지 경로를 위와 같이 경로 설정했습니다.

그리고 밑에는 라우팅 코드인데
<Routes>
          <Route path="/">
            <Route index element={<Home />} />
            <Route path="login" element= {<Login/>}/>
            <Route path="users">
             <Route index element={<List />} />
             <Route path=":userId" element= {<Single/>}/>
             <Route path="new" element= {<New/>}/>
            </Route>
            <Route path="products">
              <Route index element={<List />} />
              <Route path=":productId" element= {<Single/>}/>
              <Route path="new" element= {<New/>}/>
            </Route>

http://localhost:3000/
http://localhost:3000/users
http://localhost:3000/login
http://localhost:3000/product 는 public 내의 이미지가 정상 출력되는데

---------------------------------------
http://localhost:3000/users/213123124
http://localhost:3000/users/new
http://localhost:3000/product/1232452
http://localhost:3000/product /new
그 이상 라우터 페이지로 갈 때는 
이미지가 엑박이 뜨는데 어디에 문제가 있을까요? ㅠㅠ

[codingapple]

그러게요 react-router-dom 버전 6.4 말고 낮춰서 새로운 프로젝트에 설치해서 테스트해봅시다

[장준혁]

소스코드가 안보였었네요
/// src="image/Main logo.png" />
이렇게 했다가 src="./image/Main logo.png" /> 이렇게 했다가 
src="/image/Main logo.png" /> 점 하나 빼니까 되네용 ㅎㅎ

항상 좋은 정보나눔 감사합니다 :)
 유튜브 잘 보고 있어요!

[글쓴이]

글