Question: I have a component and inside that, I have a **img** for showing profile image
I've put this in my html :

```
<img v-bind:src="this.profileSrc"/>

```

and in my **computed properties**, I have **profileSrc** method that is like this :

```
profileSrc(){
      const that = this;
      console.log(that);
      return `${variables.BASE_URI}/file/thumbnail/${that.$store.getters[types.AUTH_GET_USER].picture.id}`
    }

```

that works great from second page load but in first time, It crashes with :
**Cannot read property 'picture' of null**, it means that it doesn't recognize **this** variable at the first time.but when I change page and go back in my page again it's working.
why ?
thank you :))

Answer: 
Check for the existence of `picture` in the computed property:

```
profileSrc() {
  const that = this;
  if (that.$store.getters[types.AUTH_GET_USER].picture) {
    return `${variables.BASE_URI}/file/thumbnail/${
      that.$store.getters[types.AUTH_GET_USER].picture.id
    }`;
  }
}

```

The computed property will "execute" as soon as `picture` is available for the component.
You can add `v-if` in `img` tag. In this case the picture will shown when the `pictureSrc` is loaded.

```
<img v-if="profileSrc" v-bind:src="this.profileSrc"/>

```

I agree with @Bennett Dams answer. I've just added some improvement. You don't need `that` and you can extract the picture into a variable.

```
computed: {
  profileSrc() {
    const picture = this.$store.getters[types.AUTH_GET_USER].picture;

    if (picture) {
      return `${variables.BASE_URI}/file/thumbnail/picture`;
    }
  }
}

```