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

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?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source