Vue js image v-bind src not working due to incorrect path when receiving dynamic values ​​from API call using axios

Question

I'm having trouble displaying images, I want to get their paths from a SQL database and then display them on my website project. This is how I tried to make it work:

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

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

This doesn't work because the path to the image changes. In the Network tab of Developer Options, change the Request URL to

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

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

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

The request URL of the displayed image is

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

I have tried similar solutions

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

But it doesn’t work, the error is:

Error: Module "@/assets/b1q2v1.png" not found

How to correctly bind the src attribute to my dynamic image path?

Answer 1

You can change pictureLink to name:

testItem.pictureLink = 'b1q2v1'

Then create a method to get the image:

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

And call the method from the template: