230529 data 값으로 배경 이미지 설정하기

230529 data 값으로 배경 이미지 설정하기

일반적으로 이미지를 표시하기 위해서 <img>를 사용하지만, 배경이미지와 같이 드래그가 되지않고

뒷면에 표시되는 이미지는 css 속성인 background-image 속성을 이용한다.

가장 정석적인 방법은 자바스크립트로 요소에 직접 스타일을 주는 것이지만, 

문자열 템플릿을 사용하여 요소를 추가할 때는 사용할 수 없는 방법이다.

따라서 문자열 템플릿에서도 배경이미지를  사용할 수 있도록 하는 방법이 필요하다.

자바스크립트로 배경 이미지 넣기

<style>
  .bg {
    width: 400px;
    height: 400px;
  }
</style>

      const div = document.createElement("div");
      div.classList.add("bg");
      div.style.backgroundImage = 'url("https://placehold.co/600x400")';
      document.body.append(div);

 

 

문자열 템플릿으로 배경 이미지 넣기

인라인 style에 --변수명 으로 변수에 url(이미지경로)를 넘겨주고,

css 파일에서 var(--변수명)으로 변수를 받아 사용 

인라인 style에  background-image 부분을 전부 넣을 수도 있지만, 

 background-image:  linear-gradient(to bottom, rgb(255 255 255 / 0%), var(--bg-primary-color)),

  var(--backdrop-image);

만약 background-image 부분이 변경되거나 길어지면

스타일이 바뀐 건데, 자바스크립트의 문자열 템플릿을 바꿔야 하고

스타일은 최대한 css파일에서 지정하는 것이 좋다

<style>
  .bg {
    width: 400px;
    height: 400px;
    background-image: var(--bg);
  }
</style>

      const div2 = `<div class='bg' style="--bg: url('https://placehold.co/600x400');" ><div>`;
      document.body.innerHTML = div2;