[Vue] 이미지 집어넣기 {backgroundImage : `url(${})`}

 props로 받아온 이미지 넣기

 

`${}` 문자를 만들 때 "따옴표"쓰지만 `백틱`기호를 쓰면 글자 중간에 변수 넣기가 편리하다.

'문자' + 변수 + '문자" 또는 `문자 ${변수} 문자` 둘 중 하나를 선택해서 사용하면 된다.

 

<template>
  <div class="post">
    <div class="post-header">
      <div class="profile" :style="{ backgroundImage : `url(${instaData.userImage})`}"></div> <!-- 프로필사진 -->
      <span class="profile-name">{{instaData.name}}</span>
    </div>
    <div class="post-body" :style="{ backgroundImage : `url(${instaData.postImage})`}"></div> <!-- 포스팅사진 -->
    <div class="post-content">
      <p>{{instaData.likes}} Likes</p>
      <p><strong>{{instaData.name}}</strong> {{instaData.content}}</p>
      <p class="date">{{instaData.date}}</p>
    </div>
  </div> 
</template>