CODEWITHSUNDEEP
javascriptlaravelvue.jsvuejs2vue-component
Pacholoamit
Pacholoamit

Reputation: 265

Problem with Vue /Javascript interpolation

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?

Upvotes: 0

Views: 812

Answers (3)

Amaarockz
Amaarockz

Reputation: 4684

Try using the require handler

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

Upvotes: 0

Jan Madeyski
Jan Madeyski

Reputation: 359

I believe that this isn't the correct URL @/photodatabase/041120_09_24_03.jpg

You've wrote "it still doesn't work" so You get "404 Not found" error?

That link should lead to Your backend (static asset or Laravel controller). @ is rewritten by Webpack during compilation time to Your public url - it won't work as a dynamic path in runtime...

This code

<img src="@/photodatabase/041120_09_24_03.jpg" />

...should become something else after compilation. Inspect it. It could be something like that:

<img src="/static/photodatabase/041120_09_24_03.jpg" />

So if You didn't map @ in vue-router, nor in Laravels routes, then You should change @ in that link. You can try simply /photodatabase/041120_09_24_03.jpg

Upvotes: 0

Abdelrhman Gemi
Abdelrhman Gemi

Reputation: 171

Because is dynamic image src must photo be absolute URL Like: http://127.0.0.1:8000/photodatabase/041120_09_24_03.jpg or

if in the same server

/photodatabase/041120_09_24_03.jpg

or you can easily send absolute URL on response.

Upvotes: 1

Related Questions