# plugin-detective/1.1.4/troubleshoot/app/src/components/PluginAvatar.vue

Plugin Detective – Troubleshooting Conflicts, version 1.1.4. 48 lines.

- Page: https://pluginprobe.com/plugins/plugin-detective/1.1.4/code/troubleshoot/app/src/components/PluginAvatar.vue
- Raw: https://pluginprobe.com/plugins/plugin-detective/1.1.4/raw/troubleshoot/app/src/components/PluginAvatar.vue
- Modified: 2018-05-12T20:04:52+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/plugin-detective/1.1.4/code/troubleshoot/app/src/components/PluginAvatar.vue#L10-L20`.

```vue
<template>
  <md-avatar v-if="plugin.icon" class="checkbox-avatar" :class="size">
    <img :src="plugin.icon" :alt="plugin.Title" @error="replaceImage">
    <md-tooltip md-direction="top">{{plugin.Title}}</md-tooltip>
  </md-avatar>
  <md-avatar class="md-avatar-icon checkbox-avatar md-accent" :class="size" v-else>
    {{plugin.Title.charAt(0)}}
    <md-tooltip md-direction="top">{{plugin.Title}}</md-tooltip>
  </md-avatar>
</template>

<script>
import store from '@/store'
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'plugin-avatar',
  store,
  props: {
    slug: {
      type: String
    },
    size: {
      default: 'md-small',
      type: String
    }
  },
  data () {
    return {}
  },
  computed: {
    plugin () {
      return this.activeCase.all_suspects[this.slug]
    },
    ...mapState([
      'activeCase'
    ])
  },
  methods: {
    replaceImage () {
      this.removeImage(this.plugin.plugin_file)
    },
    ...mapMutations([
      'removeImage'
    ])
  }
}
</script>
```