vuetify는 이미지가 로딩되지 않지만 prop에는 url이 표시되어 있습니다.

vuetify는 이미지가 로딩되지 않지만 prop에는 url이 표시되어 있습니다.

<v-img :src="getPhoto()"  height="200px" width="200px"></v-img>

getphot 기능에서 로딩하기 위한 사진입니다.src는 페이스북의 URL을 가지고 있지만 vuetify는 아무것도 로드하지 않습니다.

computed: {
  user () {
    return this.$store.getters.user
  }
},
methods: {
  getPhoto () {
    return this.$store.getters.user.photoUrl
  }
}

어떠한 에러도 발생하지 않습니다.또, 링크를 사용하면 이미지에 액세스 할 수 있습니다.디바이스에서 로그인했기 때문입니다.주의: 이 모든 것에 파이어베이스를 사용하고 있습니다.

해라

<v-img :src="require('getPhoto()')"  height="200px" width="200px"></v-img>

대신

<v-img :src="getPhoto()"  height="200px" width="200px"></v-img>

Vue Loader는 상대 경로를 자동으로 요구 함수로 변환합니다.유감스럽게도 커스텀 컴포넌트의 경우는 그렇지 않습니다.require를 사용하면 이 문제를 회피할 수 있습니다.Vuetify를 Vue-CLI 3 플러그인으로 사용하는 경우 vue-loader 옵션을 수정하여 프로젝트의 vue.config.js 파일을 편집할 수 있습니다.

// Incorrect
<v-img src="../path/to/img" />

// Correct
<v-img :src="require('../path/to/img')" />

출처 : Vuetify

업데이트: 상대 경로를 사용하지 않을 때 함수를 사용하여 다음 값을 가져올 때 예를 만들어 보았습니다.URL이미지 소스용입니다.코드에는 두 가지 문제가 있는 것 같습니다.

1. 를 삭제합니다.()부터getPhoto()에<v-img>
2. 를 추가합니다.getPhoto()계산된 속성으로 이동합니다.

여기 Codepen이 있습니다.

도움이 됐으면 좋겠어요.

언급URL : https://stackoverflow.com/questions/55869152/vuetify-doesnt-load-image-in-v-img-although-prop-shows-it-has-the-url