<template>
  <img :src="json.path" :alt="json.realName" @error="replaceDefaultUrl">
</template>

<script>
module.exports = {
  props: {
    jsonStr: {
      type: String,
      require: true
    }
  },
  computed: {
    json: function () {
      return this.jsonStr ? JSON.parse(this.jsonStr) : this.defaultJson;
    }
  },
  methods: {
    replaceDefaultUrl: function () {
      this.json = {
        path: this.defaultJson.path,
        realName: this.defaultJson.realName
      };
    }
  },
  data: function () {
    return {
      defaultJson: {
        path: '/assets/user-default.png',
        realName: '默认头像',
        saveName: ''
      }
    };
  }
};
</script>