Vuetify에서 v-img에서 폴백을 어떻게 하는가?

Vuetify에서 v-img에서 폴백을 어떻게 하는가?

Vuetify에서 나는.v-img, 그리고 만약 메인 이미지가 실패한다면 폴백으로 바꾸고 싶다.

<v-img :src="cPicture" contain v-on:error="onImgError"></v-img>


cPicture : function() {
            return this.failed_image ? "https://assets.dryicons.com/uploads/icon/svg/9872/ab3c0a16-6f14-4817-a30b-443273de911d.svg" : "http://myimg.jpg/";
        },


onImgError : function(event) {
            alert(1);
            this.failed_image = true;
            //this.$forceUpdate();
        },

경보 1이 발생한다. Vuetify또한 콘솔에 오류를 발생시킨다.그러나 폴백 이미지는 보이지 않는다.

어떻게 하면 고칠 수 있을까?

위의 메인 이미지에는 의도적으로 나쁜 링크가 있지만, 내가 좋은 링크를 사용하면 그것이 보일 것이다.

당신은 사용할 수 있다.cPicture계산된 속성으로서onImgError하나의 방법으로:

new Vue({
  el: '#app',
  data() {
    return {
      failed_image: false
    }
  },
  computed: {
    cPicture: function() {
      return this.failed_image ? "https://picsum.photos/500/300?image=4" : "https://pisum.photos/500/300?image=5";
    },



  },
  methods: {
    onImgError: function(event) {

      this.failed_image = true;

    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.3.7/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-layout>
      <v-flex xs12 sm6 offset-sm3>
        <v-card>
          <v-container grid-list-sm fluid>
            <v-img :src="cPicture" contain v-on:error="onImgError"></v-img>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>

이 펜을 확인하다

편집

원하는 이미지에 대해 잘못된 이미지 링크를 제공했었습니다. 이 경우 콘솔에 표시될 예외:

"[Vuetify] 이미지 로드 실패

이 경우 우리는 다른 이미지를 유효한 링크로 로드할 것이다.

나도 같은 일을 하지만 암호는 적어

<v-img tile :src="logo.url" v-on:error="logo.url='/logo.svg'" />

나는 @maurilio-atila가 한 일을 좋아한다.내 경우, 다른 서버에서 이미지가 전송되었고 결국 이렇게 되었어.

 <v-img :src="`${item.image ?`https://some/endpoint/${item.image}` : '/fallback.png'}`"/>

다루지 않는 한v-on:error그것은 그것을 피한다.

이것은 Github에 대해 물어본 적이 있으며 Vuetify 3에서 추가되어야 한다.

그 사이에 이것을 해결하는 나의 방법은 다음과 같다.

나는 먼저 두 개의 데이터를 만든다.

data(): {
 avatarLoadingFailed: false,
 fallbackAvatar: fallbackAvatar,
}

fallbackAvatar로드 실패 시 표시할 이미지 파일

그런 다음 표시할 아바타를 고정하기 위해 계산된 데이터를 생성한다.

computed: {
  avatar() {
    return this.avatarLoadingFailed
      ? this.fallbackAvatar
      : this.getUserAvatar;
  },
}

마침내 나의template꼬리표를 달다

// @error="avatarLoadingFailed = true" works fine as well
<v-img :src="avatar" v-on:error="avatarLoadingFailed = true"/>

나는 이것을 바닐라뿐만 아니라 타입스크립트로 VueJS에서 시험해 보았다.JS

참조URL: https://stackoverflow.com/questions/53215071/how-to-do-a-fallback-img-in-v-img-in-vuetify