404 handling

[ataylor32]

I'm working on a site where the owner has asked that if the user doesn't have a Gravatar, fall back to displaying a colored circle with their initials. Setting default-img to 404 gets me part of the way there. I would like to do this with CSS rather than an image, so I would like the <img> tag to have @error with my function for showing the initials. There doesn't seem to be a way to do this.

[JiriChara]

Hey @ataylor32,

sorry for my late reply! I was on holiday.

I think it's a good idea, I will give it a try.

[JiriChara]

@ataylor32 you can update vue-gravatar to v1.2.0 :wink:

[ataylor32]

No worries on the delay. Thanks very much for doing this!

[ijunaid8989]

how does this work? I have this

                <v-gravatar
                  ref="defaultGravtar"
                  class="float-left gravatar-margin avatar size30"
                  :size="30"
                  :email="owner.email"
                  :alt="owner.email"
                  :default-img="getFavicon(owner.email)"
                />

and when it fails I have do something like this

    getFavicon(email) {
      let signature = md5(email)
      let index = email.indexOf("@")
      let domain = email.substr(index + 1)
      setTimeout(() => this.checkImage(), 3000)
      let favicon = `https://favicon.yandex.net/favicon/${domain}`
      return `https://gravatar.com/avatar/${signature}?s=30&d=${favicon}`
    },
    checkImage() {
      if (this.$refs.defaultGravtar) {
        if (this.$refs.defaultGravtar.$el.naturalWidth < 2) {
          this.$refs.defaultGravtar.$el.src =
            "https://gravatar.com/avatar/446b9c716e6561d9318bc34f55870323"
        }
      }

I am looking for a simple solution where if getFavicon don't work then fallback to default any gravatar?