Problem with Vue /Javascript interpolation

Question

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?

@Pacholoamit! If my answer works for you and you are happy - then in general you would accept the answer. This will not only help other people with the same issue but it will also mean people are more likely to help you in the future with any other issues you have. You can read about accepting here: stackoverflow.com/help/accepted-answer — Amaarockz
– Amaarockz, Commented Nov 14, 2020 at 5:51

Abdelrhman Gemi · Accepted Answer · 2020-11-04 09:59:35Z

1

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.

answered Nov 4, 2020 at 9:59

Abdelrhman Gemi

1717 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jan Madeyski · Accepted Answer · 2020-11-04 10:07:46Z

0

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

answered Nov 4, 2020 at 10:07

Jan Madeyski

3591 silver badge9 bronze badges

4 Comments

Pacholoamit Over a year ago

Here's picture if I inspect element I got no problem in the console as well. No errors.

Pacholoamit Over a year ago

I did a variety of checks. There's nothing wrong with the controller since when I did the same request via postman it works. It has something to do with the syntax I think or v-bind. Because if I don't v-bind it, and I just copy paste the link to the src prop directly. It renders.

Jan Madeyski Over a year ago

And what URL did You use Postman? Because @/photodatabase/041120_09_24_03.jpg is just a tailing part, and I think the problem is with the beginning that cant be resolved by router...?

Pacholoamit Over a year ago

No, you were right in a way. It had something to do with webpack. I fixed it with the require() command. hahah. Thanks for pointing me in the right direction.

Amaarockz · Accepted Answer · 2020-11-07 14:42:35Z

0

Try using the require handler

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

answered Nov 7, 2020 at 14:42

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

Problem with Vue /Javascript interpolation

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related