Can't see images in vuetifyjs carousel. How to write paths correctly?

Question

JavaScript

<template>
           <v-carousel hide-delimiters>
             <v-carousel-item
             v-for="(item,i) in items"
              :key="i"
              :src="item.src"
               ></v-carousel-item>
            </v-carousel>
       </template>
      <script>
       export default {
         data () {
             return {
             items: [
            {
                    src: '@/assets/img1.jpg',
            },
           {
                  src: '@/assets/img2.jpg',
           },

          ],
       }
     },
   }

Answer 1

The easiest way is to put images in public (or static) and access them from the root /public/img1.jpg

Answer 2

If still relevant, you can try to do this:

import image1 from '../assets/img1.jpg'; // Путь прямой, не через @
import image2 from '../assets/img1.jpg';

export default {
  data: () => ({
    items: [image1, image2]
  })
}

Try like this. But it will be more conceptual to set up nginx / apache, distribute statics and pictures through it, and pass just paths to img;

<v-carousel-item
             v-for="(item,i) in items"
              :key="i"
              :src=" `http://***/img${i}.jpg` "
               ></v-carousel-item>
            </v-carousel>