React에서 <img> 경로가 안불러와지면

<img> 태그에 src 경로 설정을 잘 했는데도 안불러와진다. 

 

해결방안1(임포트)

• 임포트를 해서 넣어주는 방식인데

import Image from '../images/image.png'

function Func(){
  return(
    <div>      
      <img src={Image}  alt="img" height={50} width={50}/>
    </div>
  );
}
export default Func;

대충 이런식으로 임포트 해주면 될 것 같고

 

해결방안2(로칼)

• 로컬에서는 public 폴더 안에 있는 이미지만 사용이 된다고 아니
• public/images/image.jpg 이런식으로 넣어둔다.
• 디스플레이할 때에는 src="images/image.jpg" 로 불러온다.

 

이렇게 해야 로컬호스트에서 정상적으로 열린다.

 

 

고생이 많다.