React에서 이미지 삽입하는 방법을 먼저 정리하고, background-image 넣은 이미지 url이 보이지 않은 이슈를 해결하는 방법을 정리하겠습니다.

src에 경로를 import하는 방법

import 이미지 from ‘./이미지경로.jpg’
<img src={이미지} />

public/assets에 있는 이미지 삽입하는 방법

<img src= ”/assets/이미지.jpg” />

이 경우 public 폴더 안에 assets 폴더가 있어야 합니다.

public/assets에 있는 이미지를 background-image로 삽입하는 방법

<div style={{ backgroundImage: "url(../assets/이미지.jpg)" }}></div>

이 방법 역시 public/assets 폴더가 존재해야 합니다.

background-image의 url에 서버에서 받은 이미지를 삽입하는 방법

제가 원하는 방법은 서버에서 받은 이미지 url을 background-image를 통해 이미지 삽입 해야 했습니다. 이 경우 위의 방법을 사용해도 이미지 삽입이 되지 않았습니다. 확인해보니 서버에서 받은 이미지 url을 살펴보니 공백이 존재하는 것을 발견했습니다.

서버에서 받은 이미지를 직접 브라우저에 붙여 넣으면 공백은 없었습니다. 따라서 replaceAll을 통해 url의 공백을 전부 ‘%20’으로 치환해주었습니다.

const backgroundImage = `url(${
      profileImage ? profileImage?.replaceAll(' ', '%20') : profilePhotoImage
})`;
background-image: ${backgroundImage};

위 코드처럼 이미지 url에 있는 공백을 ‘%20’으로 모두 치환해주었더니 이미지가 잘 삽입 되었습니다.