I have an array which looks like below:
questions: [
{
question: "How do you say 'My Car' in Malayalam",
answers: {
a: "a) Ente Car",
b: "b) Ninte/Ningalude Car",
c: "c) Onte Car",
d: "d) Aarudeyo Car",
},
images: "@alias/vallamkali.jpg",
correctAnswer: "a",
},
{
question: "How do you say 'your Car' in Malayalam",
answers: {
a: "a) Onte Car",
b: "b) Aarudeyo Car",
c: "c) Ninte/Ningalude Car",
d: "d) Ente Car",
},
images: "@alias/il_leki.png",
correctAnswer: "c",
},
{
question: "How do you say 'our car' in Malayalam",
answers: {
a: "a) Achante Car",
b: "b) Ninte/Ningalude Car",
c: "c) Ente Car",
d: "d) Nammalude/Njangalude Car",
},
images: "@alias/isthapetta_doubt.jpg",
correctAnswer: "d",
},
],
but when I try to print using the below code
<div v-if="index < count">
<p>{{ questions[index]['question']}}</p>
<p>{{ questions[index]['images']}}</p
</div>
Only the questions are generated correctly but the images are not displayed properly, only the location gets printed as below and is highlighted in blue. Please help.
I didn't use the function call.
I directly used require
keyword in the img
tag itself and it worked.
<img :src="require(`@alias/${questions[index]['images']}`)" alt="No image here too" />
@Nikola Pavicevic - Thanks for helping me think in this direction!