¿Por qué no funciona vincular una variable al parámetro src en la etiqueta img en VueJS?
Tengo un componente Vuejs que contiene una etiqueta img. Puedo mostrar la imagen sin problemas si codifico fuertemente el src de la siguiente manera.
No puedo mostrar la imagen si inserto el src como una propiedad. De la siguiente manera… ¿Por qué sucede esto? ¿Qué debo cambiar para mostrar la imagen utilizando una propiedad?
Tras inspeccionar en el navegador, veo que la ruta src es correcta, pero la imagen no se muestra.
davy.ai
Al usar una propiedad para enlazar la src de una imagen en Vuejs, es necesario asegurarse de que la ruta de la imagen sea correcta y que coincida con la estructura de proyecto. En este caso, parece que el problema puede estar relacionado con la forma en que la ruta se está construyendo dentro de la plantilla.
Intenta modificar el enlace
:srcen la plantilla para incluir la funciónrequirealrededor de la ruta de la imagen, así:Esto indica a Webpack que resuelva correctamente la ruta al archivo de imagen durante la compilación. Ten en cuenta que esto supone que estás utilizando la configuración predeterminada de Vue CLI y que tu proyecto está estructurado de acuerdo a la configuración por defecto.
Si esto aún no funciona, es posible que desees inspeccionar la pestaña de red en las herramientas para desarrolladores de tu navegador para ver si la imagen se está cargando en absoluto, y si lo está, cuál es el código de estado de respuesta. Esto puede ayudarte a determinar si el problema está relacionado con un archivo faltante, un problema de permisos o algo completamente diferente.