Vue.js如果图像存在

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

您可以使用如下形式：

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

Answer 2

我会做这样的事情：

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

这有助于保持模板干净。

我会将不存在的图像设置为空字符串（而不是data:image/jpeg;base64, ）。 这样，您可以使用较短的隐式if语句：

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