Vuejs, если изображение существует

Question

Я новичок в vuejs, у меня есть смонтированный раздел для поиска изображения:

mounted () {
    this.UserImage = localStorage.Image
    this.UserName  = localStorage.Name      
},

Когда у меня нет изображения this.UserImage возвращает строку: data:image/jpeg;base64,

Что я могу использовать для сравнения и использования v-if, если v-else отображает какое-то изображение по умолчанию, если я не нашел изображение?

Моя попытка была:

mounted () {
      this.$nextTick(function () {
        this.UserImage = localStorage.Image
        this.UserName  = localStorage.Name
    })
  },

Answer 1

Я бы сделал что-то вроде этого:

mounted () {
    this.UserImage = localStorage.Image !== 'data:image/jpeg;base64,' ? localStorage.Image : defaultPath
},

Это поможет сохранить шаблон в чистоте.

Я бы установил изображение, которое не существует, в пустую строку (вместо data:image/jpeg;base64,). Таким образом, вы могли бы иметь более короткое неявное выражение if:

mounted () {
    this.UserImage = localStorage.Image || defaultPath
},

Answer 2

Вы можете использовать что-то вроде этого:

<img :src="userImage" v-if="userImage !== 'data:image/jpeg;base64,'">
<img src="defaultImagePath" v-else>