ImageView.vue

<template>
  <TitleComposant label="Images" class="q-mt-xl" />
  <div class="q-mx-xl q-pb-xl">
    <swiper
      :style="{
      '--swiper-navigation-color': '#fff',
      '--swiper-pagination-color': '#222222',
      '--swiper-pagination-bullet-inactive-opacity': 0.4,
      '--swiper-pagination-bullet-inactive-color': '#222222',
    }"
      style="height: 400px; border-radius: 10px;border: 10px solid #222222"
      :lazy="true"
      :pagination="{
      clickable: true,
    }"
      :navigation="true"
      :modules="modules"
      class="mySwiper non-selectable"
    >
      <swiper-slide v-for="{src,nb} in imageProjet" zoom :key="nb">
        <img
          :src="src"
          loading="lazy"
          style="border-radius: 10px"
        />
        <div
          class="swiper-lazy-preloader swiper-lazy-preloader-white"
        ></div> </swiper-slide
      >
    </swiper>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { defineProps } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import { Pagination, Navigation } from 'swiper/modules';

import 'swiper/css/pagination';
import 'swiper/css/navigation';

import TitleComposant from 'components/TitleComposant.vue';
import type { PropType } from 'vue';
import images from './images';

const props = defineProps({
  id: {
    type: String as PropType<'Block' | 'Chasse_au_monstre' | 'Discord' | 'F1_2077' | 'JeuLudoEducatif' | 'PizzaLand' | 'PrototypeSite'>,
    required: true
  },
  folder: String
});

const imageProjet = ref<{ src: string; nb: number }[]>([]);
const modules = ref([Pagination, Navigation])

onMounted(() => {
  let i = 0;
  imageProjet.value = images[props.id].map((img: string) => ({
    src: `${process.env.BASE_URL}/public/${props.folder}/${img}`,
    nb: i++
  }));
});

</script>

<style scoped>
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #222222;
}

.swiper-slide img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
}

</style>