img 태그의 src 바인딩 , background 하는 방법

이런식도 가능

<div :style="{ backgroundImage: 'url(' + image + ')' }"></div>

or

<div :style="{'background-image': 'url(' + require('./assets/media/img.jpg') + ')'}"></div>

or

<div :style="{ backgroundImage: `url('${image}')` }"></div>

 

출처

Vue.js에선 element의 속성을 동적으로 처리할 때 v-bind라는 Directive를 사용한다.

(Vue.js의 Directive는 다음에 정리)

일반적인 HTML 태그들의 속성을 바인딩할 경우가 생기는데,

그 대표적인 예로 img 태그의 src 속성이다.

(src는 불러올 이미지의 경로를 지정해준다.)

특히 여러 이미지를 for문으로 한 번에 불러올 때 src를 바인딩 해줘야 한다.

다음과 같이 말이다.

<templates>
  <div v-for="person in people":key="person.id">
    <img :src="person.profileUrl" />
    <!-- person이라는 각 객체의 profileUrl 키에 접근, 그에 해당하는 value를 동적 바인딩 해준다. -->
  </div>
</tempates>

<script>
export default {
  data() {
    return {
      people: [
        {
          // ... 생략
          profileUrl: "../../assets/images/person1.jpg"
        },
        {
          // ... 생략
          profileUrl: "../../assets/images/person2.jpg"
        },
        {
          // ... 생략
          profileUrl: "../../assets/images/person3.jpg"
        },
        {
          // ... 생략
          profileUrl: "../../assets/images/person4.jpg"
        }
      ],
    }
  }
}
</script>

위와 같이 :src 또는 v-bind:src를 써서 binding 해준다.

(콜론은 v-bind: 의 sugar syntax라고 생각하면 된다. 즉, 축약어)

하지만 위와 같이 하면 이미지가 불러와지지 않는다.

왜 나오지 않는 것일까?

그 이유는 각 객체의 profileUrl에 저장이 되어 있는 것은 단순 String 값이기 때문이다.

이를 해결하기 위해서는 해당 경로를 import한다는 의미로

require를 사용해야 한다. 다음 코드와 같이 쓰면 해결이 된다.

<script>
export default {
  data() {
    return {
      people: [
        {
          // ... 생략
          profileUrl: require("../../assets/images/person1.jpg")
        },
        {
          // ... 생략
          profileUrl: require("../../assets/images/person2.jpg")
        },
        {
          // ... 생략
          profileUrl: require("../../assets/images/person3.jpg")
        },
        {
          // ... 생략
          profileUrl: require("../../assets/images/person4.jpg")
        }
      ],
    }
  }
}
</script>

이렇게 하면 이미지 4개가 동적으로 불려와서 화면에 보여진다.