[🐾 일지] 리액트에서 <img> 경로가 안 불러와질 때...

가끔씩 개발을 하다보면 가장 기본적인 단계에서 태그가 안 보이거나 적용이 안 되거나 하는 경우가 있다.

고구마 이만 이천개정도를 물 없이 먹는 답답함에 비례하는... ⚈ ̫ ⚈

 

아니 오늘은 갑자기 <img>태그에 src 경로 설정에 파일이 분명 있는데! 안 불러와지는 것이었다..ㅎ

 

드디어 세상에서 가장 멍청한 사람이 된 것인가 싶었지만 다양한 방법을 시도해봤다.

 

1. <img> 태그 src 상대경로, 절대경로 다 해보기
2. image 폴더를 바로 하위로 옮겨보기
3. <div>로 해서 background-image로 넣기

 

아니 근데 다 안되네... 싶을 때 뜻하지 않게 되버렸다.

 

import Image from 'layouts/About/logo-design.png';

const logo = <img src={Image} alt="로고" width={60} height={60}></img>;

const Header = () => {
    return (
        <Container>
            <LogoContainer>
                {logo}
            </LogoContainer>
        </Container>
    );
};

 

이미지 자체를 컴포넌트로 불러와서 src={Image} 이렇게 넣으면 된다 

근데 src="layouts/About/logo-design.png" 하면 또 안됨... 경로를 넣으면 그냥 안됨...

이유는 나도 잘 모르겠다..ㅎ

 

조금 찾아보니 경로를 넣을꺼면 public 폴더(root 디렉토리) 안에 있는 이미지만 사용이 된다고 한다. public/images/logo.jpg 이렇게 넣어두고 디스플레이할 때에는 src="images/thing.jpg" 이렇게 해야 http://localhost:3000/images/logo.jpg 에서 정상적으로 열린다고 함.

 

👇🏻 자세한 참고

https://daveceddia.com/react-image-tag/

Using the image tag in React