Блог

Главная - Вопросы по программированию - Как я могу установить изображения, подобные изображению ссылки ниже, в vuetify?

Как я могу установить изображения, подобные изображению ссылки ниже, в vuetify?

#css #vue.js #nuxt.js #vuetify.js

#css #vue.js #nuxt.js #vuetify.js

Вопрос:

Я хочу количественно оценить, что мне v-img нравится то, что вы видите на изображении ниже.

ссылка на пример изображения

Есть ли способ сделать что-то вроде изображения, которое вы видите в vuetify v-img .

  <div class="row">
      <v-img style="margin:2px" max-height="301" max-width="380"
      :key="index" v-for="(image, index) in post.userPostImg" 

      :src="$store.state.baseURL   '/news/'   image"> </v-img>
    </div>

Комментарии:

1. вы можете использовать grid или flex для определения областей для вашего изображения, а затем использовать v-img в каждой области для рендеринга изображений.

Ответ №1:

Создайте две строки с no-gutters помощью prop, первая из которых содержит одно изображение, а другая содержит три столбца, которые содержат 3 изображения :

   <v-row no-gutters>
      <v-col cols="12">
        <v-img :src="`https://picsum.photos/500/300?image=51`" aspect-ratio="1">

        </v-img>
      </v-col>
    </v-row>
    <v-row no-gutters>
      <v-col cols="4">
        <v-img :src="`https://picsum.photos/500/300?image=52`" aspect-ratio="1">

        </v-img>
      </v-col>
      <v-col cols="4">
        <v-img :src="`https://picsum.photos/500/300?image=53`" aspect-ratio="1">

        </v-img>

      </v-col>
      <v-col cols="4">
        <v-img :src="`https://picsum.photos/500/300?image=54`" aspect-ratio="1">

        </v-img>

      </v-col>

    </v-row>

ЖИВАЯ ДЕМОНСТРАЦИЯ