I have an array which looks like below:
JavaScript
x
36
36
1
questions: [
2
{
3
question: "How do you say 'My Car' in Malayalam",
4
answers: {
5
a: "a) Ente Car",
6
b: "b) Ninte/Ningalude Car",
7
c: "c) Onte Car",
8
d: "d) Aarudeyo Car",
9
},
10
images: "@alias/vallamkali.jpg",
11
correctAnswer: "a",
12
},
13
{
14
question: "How do you say 'your Car' in Malayalam",
15
answers: {
16
a: "a) Onte Car",
17
b: "b) Aarudeyo Car",
18
c: "c) Ninte/Ningalude Car",
19
d: "d) Ente Car",
20
},
21
images: "@alias/il_leki.png",
22
correctAnswer: "c",
23
},
24
{
25
question: "How do you say 'our car' in Malayalam",
26
answers: {
27
a: "a) Achante Car",
28
b: "b) Ninte/Ningalude Car",
29
c: "c) Ente Car",
30
d: "d) Nammalude/Njangalude Car",
31
},
32
images: "@alias/isthapetta_doubt.jpg",
33
correctAnswer: "d",
34
},
35
],
36
but when I try to print using the below code
JavaScript
1
5
1
<div v-if="index < count">
2
<p>{{ questions[index]['question']}}</p>
3
<p>{{ questions[index]['images']}}</p
4
</div>
5
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.
Advertisement
Answer
I didn’t use the function call.
I directly used require
keyword in the img
tag itself and it worked.
JavaScript
1
2
1
<img :src="require(`@alias/${questions[index]['images']}`)" alt="No image here too" />
2
@Nikola Pavicevic – Thanks for helping me think in this direction!