반응형
경로 문자열을 개체 값과 결합하는 Vue JS v-bind 이미지 src 특성이 작동하지 않음
여기 뭔가 간단한 게 없는 게 분명해.템플릿 안에서 나는 단지 객체에서 소싱된 이미지 파일 이름에 경로를 추가하려고 한다.나는 여러 가지 시도를 해봤는데, 등 진드기 등등이 시큰둥한데, 부에는 그 중 어느 것도 마음에 들지 않는다.이 형식을 올바르게 지정하려면 어떻게 해야 하는가?
<img class="img-fluid" v-bind:src="assets/img/" {{playerDetail.pic}} alt="">
playerDetail.pic = "player_image.png"
그것은 이렇게 하세요.
img class="img-fluid" v-bind:src="'assets/img/' + playerDetail.pic" alt="">
Vue는 HTML 속성에 콧수염 구문 사용을 지원하지 않는다.참조
img class="img-fluid" :src="'assets/img/' + playerDetail.pic" alt="">
또는
ES6 템플릿 리터럴을 사용할 수 있음
img class="img-fluid" :src="`assets/img/${playerDetail.pic}`" alt="">
반응형
'Programing' 카테고리의 다른 글
디스트패키지(dist-package)와 사이트패키지(site-package)의 차이점은? (0) | 2022.03.21 |
---|---|
정적 자산을 nuxt 생성과 함께 동적으로 포함하는 방법 (0) | 2022.03.20 |
가중치 있는 랜덤 버전.선택하다 (0) | 2022.03.20 |
각도에서 http 통화 신청을 취소해야 하는 거야? (0) | 2022.03.20 |
조건일 경우 다른 조치 후 Redex 호출 조치 (0) | 2022.03.20 |