How to batch src of images in Nuxt.js and Vuetify.js

Question

How to batch src of images in Nuxt.js and Vuetify.js

Navigation

#1 by (0 votes)

1

My problem lies in the following:

When I try to bind the src attribute of the img tag and try it in the browser it does not load the image as it should

<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>

the browser what I get is this:

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

unlike other images that I place without needing a v-for or bindeo, of these last I receive something like this:

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

If someone helped me, I would really appreciate it.

vue.js

asked by Joel Fereira 29.11.2017 в 21:49

source

1 answer

Put zeros at the ends of a java matrix How can I know when I have finished executing a cmd command from vb.net?

score 0 · Answer 1

Problem solved, my mistake was that I was calling the images as follows:

<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>

when I had to call them in the following way:

<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>

changing the path of the image by 'img/slide/slider-01.jpg' instead of 'static/img/slide/slider-01.jpg'

Although I still do not understand what is the reason for this to work, the truth is that this is how it works.