1

La forma mas habitual de insertar imágenes en VueJs (y en general) es usando el clásico:

<div class="post" v-for="post of posts" :key="post.id">
    <div class="post-user">
        <img src='@/assets/image.jpg' alt="">
        <div class="post-username">{{post.username}}</div>
    </div>
    <div class="post-content">{{post.content}}</div>
</div>

Quiero hacer posts dinámicos. Ya saben, de estos que se añaden automáticamente al elemento post usando solamente objetos con propiedades en especifico. Estoy buscando la forma de añadir ese "@/assets/image.png" a los objetos post para luego hacer algo como:

<img src="{{post.image}}">

¿Hay alguna forma de hacer esto sin quedarse calvo?

3
  • ¿De donde sale ese array posts?¿Lo obtienes de una api, una base de datos o lo tienes hardcodeado en el script? el 3 nov. 2020 a las 15:17
  • He puesto ese array en Vuex, y seguidamente le llamo desde mi componente usando un mapState, funciona correctamente hasta el momento el 3 nov. 2020 a las 15:22
  • Muestra cómo añades un nuevo post. el 3 nov. 2020 a las 16:07

1 respuesta 1

0

Para que tu imagen de tu post sea dinámica, solo debes guardar la URL de tu imagen en un attr (ejem: image) dentro de cada objeto post e invocarlo así:

<img :src="post.image" alt="">
4
  • Lo he intentado, pero la URL no me devuelve nada. Empiezo a creer que podría ser porque esta llegando al :src como un string en lugar de una dirección, ¿Alguna idea de si tendrá algo que ver? el 3 nov. 2020 a las 18:07
  • Probablemente el error este ahi, no te está devolviendo la URL de la imagen, checka que valor te trae en image
    – Angy QR
    el 3 nov. 2020 a las 18:11
  • Ya lo logre, ¡Gracias por la ayuda! el 4 nov. 2020 a las 16:44
  • Genial @SphiryeOrganizm 😁
    – Angy QR
    el 4 nov. 2020 a las 17:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.