[ Vue.js ] img 태그 src 바인딩 하는 방법 , Error: Cannot find module ''

<template>
  <div class="quiz-all">
    <img
      :src="`${this.images[this.currentIndex].path}`"
      alt=""
      class="quiz-image"
    />
  </div>
</template>

최근에 vue.js 에서 이미지를 동적으로 img 요소 src 어트리뷰트 안에 

파일경로를 동적으로 바인딩 시커서 이미지를 랜더링 해야 할 일이 생겼다. 

 

근데 생각대로 동작을 하지않았다. 

위와 비슷한 코드로 로직을 구성했는데 내 생각대로라면

 

:src="`${this.images[this.currentIndex].path}`"

이 부분에서 저 코드 리턴값이 

../images/hello.jpg

이렇게 반환되니까 당연히 저기에 src 경로에 지정되면서 이미지가 랜더링 되겠지.. 했는데 

엥? 

:src="`${this.images[this.currentIndex].path}`"

 

Error: Cannot find module '../images/hello.jpg'

이런 식으로 에러 로그가 찍혔다.. 이미지는 당연히 랜더링 되지 않았다. 

 

그래서 여러 가지 방법으로 시도를 해보았지만 다실 패했다

:src="require(`${this.images[this.currentIndex].path}`)"

여러 블로그를 검색해 본 결과 require를 사용하면 된다 해서 require를 사용해서 해봤더니 이미지랜더링이 되지 않았다.

 

근데 이상한 점이

:src="require(../images/hello.jpg)"

 라고 하드코딩해 주면 이미지가 랜더링 됐다

 

this.images[this.currentIndex].path <- 이게 리턴값이 ../images/hello.jpg 인데 말이다!!!! 너무 화가 났다  🔥

 

저 데이터는 json 데이터로 세팅해 놨었는데 

 

{
  "data": [
	{"path" : "../images/hello.jpg"}
  ]
}

 

위와 같은 형식으로 세팅해 놨다 진짜 여러 가지 방법을 동원해봤지만 이미지 랜더링은 되지 않았고 

 

에러코드를 살피던 중에 뭔가 이상한 점을 발견했다 

 

src 에 바인딩된 경로가 /img/hello53532.jpg 이런 식으로 박혀있는 거었다..! 

 

그래서 혹시나 해서 

 

{
  "data": [
	{"path" : "hello.jpg"}
  ]
}

 

경로를 json에서 지정하지 않고 파일명과 확장자만 설정후에 

 

 require(`../images/${this.images[this.currentIndex].path}`)

 

이런 식으로 코딩을 했더니 이미지가 제대로 출력됐다.. 여기서 요점은 

 

그냥 경로를 :src="../images/hello.jpg" 이런식으로 하지 말고 

 

:src="require('../images/hello.jpg')" 이렇게 코딩을 해주어야 한다는 거다!! 

 

하지만 저마저도 안 나온다면 

require(`../images/${this.images[this.currentIndex].path}`) 이런 식으로 경로를 설정해주고 백틱을 사용해서 경로를 만들어주자!!!!!