[Vue] 이미지 data로 넣는 방법 정리 + vuetify 활용예시 (v-img)

이미지를 상태에 따라 

이미지와 관련된 작업을 하다보면 [ active | defult | error ] 등 상태값에 따라 다르게 보여줘야 하는 경우가 있다. 최소한의 코드를 작성하고 최대 효율을 내고 싶어하던 와중에 여태까지 경험해본 이미지 리소스에 대한 활용예시를 공유해보려고 한다. (물론 개발자마다 처리하는 방식이 다르기때문에 이 방법은 공유차원에서만 쓰는 글이다)

 

우선 기본적으로 v-for 문을 통해 아래처럼 배열 형식으로 소스 닉네임을 가져왔다. 보통 value가 아닌 id 값을 사용하긴 하지만 대충 적어봤다. 아래 예시는 참고용으로만 봐주시길 바랍니다.

 

👉 script data 

sortItem: [
  {
    value: 1,
    active: false,
  },
  {
    value: 2,
    active: false,
  },
  {
    value: 3,
    active: false,
  },
],

 

 

이제 이 배열을 for문을 돌려서 상태값에 따라(active) 이미지를 바꿔주려고 한다. 

사실 Vue를 처음 접했을때 바인딩(:) 구문을 사용하면 대부분의 데이터값을 동적으로 사용할 수 있어서 매우 편리하게 작동했는데 img는 그런 술수는 통하지 않는다. 따지고 보면 dom 이 읽혀질때 이미 이미지 소스를 가지고와야하기때문에일 수도 있다는 생각을 해봤다.

 

작동안하는 예시

<img :src="`@/assets/news/sort0${item.value}_active.svg`" alt="">

<img :src="'@/assets/news/sort0' + item.value + '.svg'" alt="" />

 

위 두 예시는 for 문 내부에 넣고 item 값을 받아 value로 이미지 를 동적으로 처리해주었지만 읽히지 않는다. 실제로 html 구조를 읽어보아도 경로는 맞는데 읽혀지지 않는다. (이와 관련되서 잘 알고계시는 분은 따로 알려주시면 감사하겠습니다 :-))

 

 

 

해결방법 1

첫번째 해결방법은 public 폴더 내부에 img 소스로 경로를 지정해주는 것이다. 이런경우 위에 예시로 작성된 src 부분에 아래 경로처럼 img 내부 파일명을 적어주면 동적으로 사용이 가능하다. 실제로 빌드해서 사용이 가능하다. public 은 빌드되면서 경로를 가지고 가기 때문에 결국 img :src에 읽히는 item.img 는 url 경로로 읽혀져 정상작동된다.

 

👉 template

//{"img": "/img/mark-01.svg"}
<div class="title_img">
  <img :src="item.img" alt="" />
</div>

 

http://thumbnail1.jpg => 이렇게 읽힌다

 

 

해결방법 2

작업하는 프로젝트는 애초에 vuetify 를 사용하고 있기 때문에 어렵지 않게 다른방법을 찾을 수 있었다. vuetify 에서 제공하는 v-img 를 사용 + 삼항연산자를 통해 acitve 상태값도 동시에 체크해 이미지를 어렵지않게 바꿔줄 수 있었다.

이렇게 하면 data에 해당하는 active 의 상태만 바꿔주어도 상태를 제대로 출력할 수 있다.

 

👉 template

 <section class="feeds_sort">
    <div>
      <ul>
        <li v-for="(item, index) in sortItem" :key="index">
          <button>
            <v-img
              width="26"
              height="26"
              style="margin: 0 auto"
              :src="
                item.active === true
                  ? require(`@/assets/news/sort0${item.value}_active.svg`)
                  : require(`@/assets/news/sort0${item.value}.svg`)
              "
              alt=""
            />
          </button>
        </li>
      </ul>
    </div>
  </section>