0
293
Vistas¿Cómo mostrar imágenes de una matriz en vuepress o vuejs?
Tengo una matriz que se ve a continuación:
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", }, ],pero cuando trato de imprimir usando el siguiente código
<div v-if="index < count"> <p>{{ questions[index]['question']}}</p> <p>{{ questions[index]['images']}}</p </div>Solo las preguntas se generan correctamente, pero las imágenes no se muestran correctamente, solo la ubicación se imprime como se muestra a continuación y se resalta en azul. Por favor ayuda.
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
No puede mostrar imágenes en la etiqueta p. Debe crear un método o una propiedad calculada (suponiendo que las imágenes = il_leki.png):
methods: { getImg(img) { return require(`@alias/${img}`); } }luego, en la plantilla, llame a ese método en la etiqueta img (en lugar de la etiqueta p) pasando img:
<img :src="getImg(questions[index]['images']) />
·
Juan Pablo Isaza
Denunciar
0
No usé la llamada a la función. Utilicé directamente la palabra clave require en la etiqueta img y funcionó.
<img :src="require(`@alias/${questions[index]['images']}`)" alt="No image here too" />@Nikola Pavicevic - ¡Gracias por ayudarme a pensar en esta dirección!
·
Juan Pablo Isaza
Denunciar
Responde la pregunta