<img>태그에 동적 링크 바인딩 하기 - :scr=""

html에서 이미지를 바꿔넣고 싶을때 사용하는 동적 바인딩에 대해 알아보자.

먼저 내가 겪었던 실패 사례부터 보자

나쁜예

html

<img :src="getImagePath(comment.image)" :alt="comment.image">

java
자바 코드에서 이런식으로 이미지를 단순 스트링으로 넘겨주니 동적 바인딩이 안되었음

setImg(selectImg) {
      if (selectImg === '1') return "s4_default_image.png";
      if (selectImg === '2') return "s4_mika.png";
      if (selectImg === '3') return "s4_toki.png";
    }

좋은예

java

require('이미지 경로')

require()를 통해서 :src="" 안에 들어가는 경로를 단순 스트링이 아니라 파일 경로를 import 비슷하게 해주는 것이다.

이는 우리 프로젝트가 node.js를 사용하기 때문에 쓸 수 있는 것인데 import와 달리 파일 어디 위치에도 사용할 수 있다.

성공 코드

    getImagePath(image) {
      try {
        return require(`@/assets/images/${image}`); //경로
      } catch (error) {
        console.error("Image not found:", error);
        return "";
      }
    }