vue.js - 이미지 다이나믹 바인딩 img dynamic binding

vue에서 이미지를 다이나믹 바인딩 하려면 어떻게 해야 할까요?

다음과 같은 코드를 보며 설명해보겠습니다!

실행된 화면은 위와 같습니다

그렇다면 src에 하드코딩으로 주소를 넣는 것이아닌 배열에 있는 데이터를 바인딩 하고싶다면 어떻게 해야할까?

이렇게 바인딩하면 src에 items[0].imgUrl이 바인딩 되는것이 아닌 문자열 그 자체로 전달되므로

이미지가 표시 되지 않는다

src에 문자열이 아닌 데이터를 바인딩 하고 싶다면 

src 앞에 v-bind: 디렉티브를 붙여야 합니다. (v-bind: 는 축약형으로 : 만 붙여도 됩니다)

 

이미지가 잘 나온다.

그렇다면 https://~ 로 시작하는 절대 경로가 아닌 프로젝트 폴더 안

assets 폴더안에 있는 이미지도 이런식으로 해도 바인딩 될까요?

테스트 해보겠습니다. 

이렇게 하드코딩된 1번째 이미지와 달리 

배열에 있는 데이터는 제대로 바인딩 되지 않습니다.

 

제가 찾은 해법은 메소드를 사용하는 것입니다.

인자로 @/assets/ 이후에 해당하는 파일 경로만 전달하는 방법으로 해결했습니다~

 

해결했습니다!