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?

Answer 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)" />