[css]backgroundImage에 이미지 URL이 적용되지 않는 경우 해결 방법

김정현·2022년 12월 22일
0

기타

목록 보기
13/25

url주소에 공백이 있어 style이 적용되지 않는 경우

<div
  style={{
    backgroundImage: `url(${encodeURI(
      postData.companyImgUrl
    )})`,
  }}
/>

encodeURI(URL)로 URL을 변환하여 해결할 수 있다


url주소에 소괄호가 있어 style이 적용되지 않는 경우

backgroundImage: `url('${encodeURI(
  postData.companyImgUrl
)}')`,

url()의 인자로 바로 변수값을 넣게되면 특수 문자가 처리될 때
의도와 다르게 동작하여 에러가 발생할 수 있다

따라서 위와 같이,
${encodeURI(URL)}의 앞뒤로 따옴표('')를 씌어주어 텍스트라는 것을 명시하여 준다


profile
개발 공부 블로그

0개의 댓글