Tengo un problema al mostrar imágenes cuyas rutas quiero obtener de una base de datos SQL que tengo y luego las muestro en el proyecto de mi sitio web. Esta es la forma en que estoy tratando de hacer que funcione:
<div class="imagesInQuestion"> <img class="inlineImages" :src="testItem.pictureLink" /> </div> Y en testItem.pictureLink tengo esta cadena "@/assets/b1q2v1.png"
Esto no funciona porque la ruta de la imagen cambia. En la pestaña de red de las opciones de desarrollador, la URL de solicitud cambia a
localhost:8080/cursos/pruebas/@/activos/b1q2v1.png
Luego, cuando ingreso la cadena manualmente sin v-bind:
<div class="imagesInQuestion"> <img class="inlineImages" src="@/assets/b1q2v1.png" /> </div>La imagen se muestra con una URL de solicitud de
localhost:8080/img/b1q2v1.2aa65ed1.png
He probado soluciones como
<div class="imagesInQuestion"> <img class="inlineImages" :src="required(testItem.pictureLink)" /> </div>pero no funciona, el error es:
Error: No se puede encontrar el módulo '@/assets/b1q2v1.png'
¿Cómo vinculo correctamente el atributo src a mi ruta de imagen dinámica?
Puede cambiar pictureLink a solo un nombre:
testItem.pictureLink = 'b1q2v1'luego crea un método para obtener imágenes:
methods: { getImage(img) { return require(`@/assets/${img}.png`); } }y llame a ese método desde la plantilla:
<img class="inlineImages" :src="getImage(testItem.pictureLink)" />