今天來試試 Media 類的元件，主要包含輪播及圖片相關的顯示。

Galleria

意為畫廊，此元件為圖片展示並結合輪播功能的元件，基本設定的屬性如下：

1. value：圖片清單，為一陣列包圖片資訊的物件，屬性如下：
   • itemImageSrc：放置上方的大圖
   • thumbnailImageSrc：縮圖
   • alt：圖片說明
   • title：圖片標題
2. numVisible：輪播一頁顯示的數量。
3. responsiveOptions：在不同斷點下設定輪播一頁顯示的數量。
4. containerStyle：整個畫廊的樣式

const images = ref([ // 圖片清單
  {
    itemImageSrc: 'https://fakeimg.pl/640x640/',
    thumbnailImageSrc: 'https://fakeimg.pl/80x80/',
    alt: 'Description for Image 1',
    title: 'Title 1'
  },...
])
const responsiveOptions = ref([  // 響應式設定
  {
    breakpoint: '1300px',
    numVisible: 4
  },
  {
    breakpoint: '575px',
    numVisible: 2
  }
])

<Galleria
    :value="images"
    :responsiveOptions="responsiveOptions"
    :numVisible="5"
    containerStyle="max-width: 640px"
>
    <!-- 大圖設定 -->
    <template #item="slotProps">
      <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
    </template>
    <!-- 縮圖設定 -->
    <template #thumbnail="slotProps">
      <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
    </template>
</Galleria>

Image

Image 為用來顯示圖片的元件，提供的屬性除可以提整圖片外，還附上檢視(preview)功能，檢視時同時可進行正逆時針旋轉、放大及縮小。

<Image src="https://fakeimg.pl/240x240/A5B4FC" alt="fakeimg" preview />

圖片顯示：

因為加上 preview 屬性，滑鼠游標移至圖片上時可看到檢視的檢視圖示，該圖示也可透過 template 客製。

檢視模式下可提供右上角的各功能進行圖片瀏覽的操作。

Galleria 結合 Image

在畫廊的大圖檢視下，可結合 Image 的 preview 檢視功能，作法上僅要把大圖設定的 <image> 改為 Image 元件即可達成。

<Galleria
    :value="images"
    :responsiveOptions="responsiveOptions"
    :numVisible="5"
    containerStyle="max-width: 640px"
>
    <template #item="slotProps">
      <!-- 此處大圖的設定改為 Image 元件加上 preview -->
      <Image
        :src="slotProps.item.itemImageSrc"
        :alt="slotProps.item.alt"
        style="width: 100%"
        preview
      />
    </template>
    <template #thumbnail="slotProps">
      <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
    </template>
</Galleria>

滑鼠移至大圖時顯示檢視圖示：

畫廊結合檢視圖片功能：(此為逆時針旋轉 2 次的結果)

今日嘗試 Media 類型的元件主要是因為先前實作商城的商品詳細介紹頁時，需要自行整合 swiper 等輪播套件，再根據被點擊的圖片顯示大圖的操作處理，有了 PrimeVue 提供的 Media 元件就可一次達成效果。

手機板

參考連結：

1. https://primevue.org/galleria/
2. https://primevue.org/image/
3. https://primevue.org/chip/