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