1

Mi problema radica en lo siguiente:

Cuando intento bindear el atributo src de la etiqueta img y lo pruebo en el navegador no carga como deberia la imagen

<script>
  export default {
    data () {
      return {
        items: [
          {
            src: 'static/img/slide/slider-01.jpg'
          },
          {
            src: 'static/img/slide/slider-02.jpg'
          },
          {
            src: 'static/img/slide/slider-03.jpg'
          }
        ]
      }
    }
  }
</script>
<template>
  <div>
    <v-carousel delimiter-icon="stop">
      <v-carousel-item v-for="(item,i) in items" v-bind:src="'~/static/img/slide/' + item.src" :key="i">
        <img :src=item.src alt="">
      </v-carousel-item>
    </v-carousel>
  </div>
</template>

el en navegador lo que recibo es esto:

<img src="static/img/slide/slider-01.jpg" alt="">

a diferencia de otras imagenes que coloco sin necesidad de un v-for ni bindeo, de estas ultima recibo algo como esto:

<img src="/_nuxt/img/cp-white.39b6f30.png" alt="cp-white.png">

si alguien me ayudara se lo agradeceria mucho.

1 respuesta 1

1

Problema resuelto, mi error estaba en que estaba llamando a las imágenes de la siguiente manera:

<script>
  export default {
    data () {
      return {
        items: [
          {
            src: 'static/img/slide/slider-01.jpg'
          },
          {
            src: 'static/img/slide/slider-02.jpg'
          },
          {
            src: 'static/img/slide/slider-03.jpg'
          }
        ]
      }
    }
  }
</script>

cuando tenia que llamarlas de la siguiente manera:

<script>
  export default {
    data () {
      return {
        items: [
          {
            src: 'img/slide/slider-01.jpg'
          },
          {
            src: 'img/slide/slider-02.jpg'
          },
          {
            src: 'img/slide/slider-03.jpg'
          }
        ]
      }
    }
  }
</script>

cambiando la ruta d ela imagen por 'img/slide/slider-01.jpg' en vez de 'static/img/slide/slider-01.jpg'

Aunque aun no entendio a cual es la razón para que así funcione, lo cierto es que así funciona.

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.