React에서 public 폴더 내에 접근하는 법

img 태그에 public 폴더 내의 경로 전달할때

기본적으로 경로 지정을 해주면 public 폴더 내에서 찾아간다! 따라서 다음 사진과 같은 구조에서는 다음 코드와 같이 경로를 설정해주면 된다.

import { styled } from "styled-components";

function Profile() {
  return (
    <div>
      <ProfileImg />
    </div>
  );
}

export default Profile;

const ProfileImg = styled.div`
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background-image: url("/resource/default_profile.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
`;

위 코드는 public 폴더 내의 기본 이미지를 갖고 동그란 유저 프로필 아이콘을 생성하는 코드이다.