Programing

경로 문자열을 개체 값과 결합하는 Vue JS v-bind 이미지 src 특성이 작동하지 않음

c10106 2022. 3. 20. 12:38
반응형

경로 문자열을 개체 값과 결합하는 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="">

참조URL: https://stackoverflow.com/questions/44084102/vue-js-v-bind-image-src-attribute-combining-path-string-with-object-value-not-wo

반응형