I'm trying to interpolate a value of `photo` within Vue. Here is the components:

Explaination: We are defining a data set as null. We are then, performing a post method to a backend database where we get `photo,email,name` and `id`. Everything works fine until the `photo` value. As you can see I performed a slice method on the string which removed unnecessary data. The output of this is just the file name.

```
<script>

export default {
  data() {
    return {
      photo: null,
      email: null,
      name: null,
      id: null
    };
  },
 created() {
this.axios
      .post("http://127.0.0.1:8000/api/auth/me", "body", {
        headers: axiosHeader
      })
      .then(response => {
        console.log(response.data);
        this.name = response.data.name;
        this.email = response.data.email;
        this.id = response.data.id;
        this.photo = "@/photodatabase/" + response.data.photo.slice(37, 56);
        console.log(this.photo);
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

```

The value I got is `@/photodatabase/041120_09_24_03.jpg` when I `console.log(this.photo)` which is the correct value. However when I try to interpolate it like:

```
<img v-else-if="photo != null" :src="photo"
  height="200px" width="200px" />

```

The image doesn't show. When I inspected element, you could see on the img tag that the value was `@/photodatabase/041120_09_24_03.jpg` which was the correct value.

I tried interpolating like this:

```
<img v-else-if="photo != null" :src="`${photo}`"     
    height="200px" width="200px" />

```

and it still doesn't work. However when I didn't interpolate the value of `photo`, didn't use the v-bind shorthand `:` and just copied and pasted the value of `photo` to the `src` prop like this:

```
<img
          v-else-if="photo != null"
          src="@/photodatabase/041120_09_24_03.jpg"
          height="200px"
          width="200px"
        />

```

Then it works. What am I missing here?