0

mi problema con vue.js y BootstrapVue es el siguiente:

Tengo una imagen que quiero cargar desde una dirección q guardo en una propiedad y quiero mostrarla en el atributo src,pero al intentar esto:

<b-img :src=“require(‘image’)”></b-img>

<script>
export default{
name: ‘X’,
data(){
   return{
   image:’@/assets/photo.png’
  }
 }
}
</script>

No me carga las comillas simples dentro del require y no reconoce el path donde está la imagen. He intentado escapar las comillas simples, pero no he encontrado la solución a mi problema. Espero alguien me pueda ayudar. Saludos.

1 respuesta 1

1

Para importar la imagen utilizando el path en la propiedad 'image' del estado del componente debes utilizar la siguiente sintaxis:

<b-img :src="require(`${image}`)"></b-img>

<script>
export default {
  name: 'X',
  data() {
    return {
      image: '@/assets/photo.png'
    }
  }
}
</script>

Otra alternativa igualmente válida, sería:

<b-img :src="image"></b-img>

<script>
export default {
  name: 'X',
  data() {
    return {
      image: require('@/assets/photo.png')
    }
  }
}
</script>

Te comparto un ejemplo funcional de ambas opciones en CodeSandbox: https://codesandbox.io/s/vibrant-tree-ol2mn?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark

3
  • He intentado hacer eso pero no me funciona. Lanza una advertencia: “Critical dependency: the request of a dependency is an expression” el 26 nov. 2020 a las 12:01
  • @AlejandroErnestoMontanoCord Es cierto, he corregido mi respuesta, anexo una liga con un ejemplo funcional de las alternativas que propongo
    – jonrodsanz
    el 26 nov. 2020 a las 20:48
  • Gracias por tu solución, me funciono perfectamente. No se me había ocurrido la segunda alternativa que parece sencilla. el 27 nov. 2020 a las 1:55

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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