Vue js image v-bind src not working because of incorrect path when receiving the dynamic value from an API call wiht axios

Question

I'm having a problem displaying images whose paths I want to get from an SQL database that I have then display them on my website project. This is the way in which I'm trying to make it work:

<div class="imagesInQuestion">
  <img class="inlineImages" :src="testItem.pictureLink" />
</div>

And in testItem.pictureLink I have this string "@/assets/b1q2v1.png"

This doesn't work because the path of the image changes. In the network tab of developer options the Request URL changes to

localhost:8080/courses/tests/@/assets/b1q2v1.png

Then when I input the string manually without v-bind:

<div class="imagesInQuestion">
  <img class="inlineImages" src="@/assets/b1q2v1.png" />
</div>

The picture gets displayed with a request URL of

localhost:8080/img/b1q2v1.2aa65ed1.png

I have tried solutions like

<div class="imagesInQuestion">
  <img
    class="inlineImages"
    :src="required(testItem.pictureLink)"
  />
</div>

but it doesn't work, the error is:

Error: Cannot find module '@/assets/b1q2v1.png'

How do I correctly bind the src attribute to my dynamic picture path?

Nikola Pavicevic · Accepted Answer · 2022-05-24 10:23:05Z

1

You can change pictureLink to just a name:

testItem.pictureLink = 'b1q2v1'

then create method for getting images:

methods: {
  getImage(img) {
    return require(`@/assets/${img}.png`);
  }
}

and call that method from template:

<img class="inlineImages" :src="getImage(testItem.pictureLink)" />

answered May 24, 2022 at 10:23

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

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

1 Comment

Ibrahim Over a year ago

Hello @Nikola Pavicevic, this solves my problem, thank you very much!!!

Collectives™ on Stack Overflow

Vue js image v-bind src not working because of incorrect path when receiving the dynamic value from an API call wiht axios

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related