src속성값으로 변수를 조건부로 주고 싶을 때

문제내용

• vue의 template에서 img태그의 src속성으로 영화포스터이미지의 주소가 들어있는 변수설정
• 영화포스터이미지값이 없는 경우 default이미지를 설정하고 싶음
• 값이 ""일 경우 이미지의 default이미지의 상대경로를 설정해줬는데 개발자도구로 확인한 경우 값은 잘 들어가지만 dafault이미지가 뜨지 않음

해결내용

• 이미지의 상대경로를 script에서 별도의 변수로 import한다
• 해당 변수를 img태그의 src속성에 템플릿문법을 사용해서 삼항연산자로 조건부 설정해서 해결

결과

• 1위 영화의 경우 포스터 정보가 없었는데 default이미지로 잘 나온다