影像

Image 元件的文件和範例 (<b-img> 元件) 是關於彈性行為 (因此它們永遠不會比其父元素還大)，可選擇為它們新增輕量的樣式，這些都可以透過 props 來設定。

BootstrapVue 的影像元件支援圓角圖片、縮圖樣式、對齊，甚至還能建立具有實心背景色選項的空白影像。支援延遲載入的影像可透過 <b-img-lazy> 補充元件來使用。

影像 src 解析

預設情況下，src prop (以及 blank-src prop ( <b-img-lazy>) 僅適用於絕對或完全限定網域名稱網址。如果您使用專案資源作為影像來源，請參閱元件 img src 解析以瞭解如何設定 vue-loader 來瞭解指定影像來源的自訂元件 props。

影像樣式

提供許多 props 來設定已渲染影像元素的樣式。下列小節將涵蓋各種選項。

彈性影像

BootstrapVue 中的影像可透過 fluid prop (設定 max-width: 100%; height: auto; 透過 CSS class) 來設定彈性讓它能隨著父元素縮放，最多可達影像的原生的最大寬度。

<div>
  <b-img src="https://picsum.photos/1024/400/?image=41" fluid alt="Responsive image"></b-img>
</div>

<!-- b-img-fluid.vue -->

要製作一張流動的影像，使它會成長並填滿其容器的寬度，請使用 fluid-grow prop。請注意這可能會使小位元圖影像變得模糊。

<div>
  <h5>Small image with <code>fluid</code>:</h5>
  <b-img src="https://picsum.photos/300/150/?image=41" fluid alt="Fluid image"></b-img>

  <h5 class="my-3">Small image with <code>fluid-grow</code>:</h5>
  <b-img src="https://picsum.photos/300/150/?image=41" fluid-grow alt="Fluid-grow image"></b-img>
</div>

<!-- b-img-fluid-grow.vue -->

使用 block prop 來強制影像顯示成區塊元素，而不是瀏覽器預設的內嵌區塊元素。

註：在 Internet Explorer 10 中，具有 fluid 的 SVG 影像大小不符比例。若要修正此問題，請視需要加入樣式 width: 100% \9;。此修正會不當調整其他影像格式的大小，因此 Bootstrap v4 不會自動套用。

影像縮圖

您可以使用 prop thumbnail 讓影像具有圓弧的淺色邊框外觀。

<b-container fluid class="p-4 bg-dark">
  <b-row>
    <b-col>
      <b-img thumbnail fluid src="https://picsum.photos/250/250/?image=54" alt="Image 1"></b-img>
    </b-col>
    <b-col>
      <b-img thumbnail fluid src="https://picsum.photos/250/250/?image=58" alt="Image 2"></b-img>
    </b-col>
    <b-col>
      <b-img thumbnail fluid src="https://picsum.photos/250/250/?image=59" alt="Image 3"></b-img>
    </b-col>
  </b-row>
</b-container>

<!-- b-img-thumbnail.vue -->

圓角

您可以透過將圓角 prop 設定為下列值之一來控制圓角所在的位置

true（或 prop 存在但沒有值）：圓化所有角落
false（或 prop 不存在）：不顯式圓化或角落（預設）
'top'：圓化頂部角落
'right'：圓化右側角落
'bottom'：圓化底部角落
'left'：圓化左側角落
'circle'：製作一個圓形（如果影像為正方形）或橢圓形（如果影像非正方形）邊框
'0'：明確關閉角落圓化

<template>
  <div>
    <b-img v-bind="mainProps" rounded alt="Rounded image"></b-img>
    <b-img v-bind="mainProps" rounded="top" alt="Top-rounded image"></b-img>
    <b-img v-bind="mainProps" rounded="right" alt="Right-rounded image"></b-img>
    <b-img v-bind="mainProps" rounded="bottom" alt="Bottom-rounded image"></b-img>
    <b-img v-bind="mainProps" rounded="left" alt="Left-rounded image"></b-img>
    <b-img v-bind="mainProps" rounded="circle" alt="Circle image"></b-img>
    <b-img v-bind="mainProps" rounded="0" alt="Not rounded image"></b-img>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mainProps: { blank: true, blankColor: '#777', width: 75, height: 75, class: 'm1' }
      }
    }
  }
</script>

<!-- b-img-rounded.vue -->

影像對齊

可以使用布林 prop 來對齊影像，包括 left（左浮動）right（右浮動），以及 center（自動置左+置右定位）。您也可以將影像置中於 text-center 類別的容器中。

左對齊和右對齊（浮動）

<div class="clearfix">
  <b-img left src="https://picsum.photos/125/125/?image=58" alt="Left image"></b-img>
  <b-img right src="https://picsum.photos/125/125/?image=58" alt="Right image"></b-img>
</div>

<!-- b-img-left-right.vue -->

置中對齊（區段）

<div>
  <b-img center src="https://picsum.photos/125/125/?image=58" alt="Center image"></b-img>
</div>

<!-- b-img-center.vue -->

註： left 優先於 right，而 right 優先於 center。

空白（或實色）影像

<b-img> 內建支援產生任何寬度和高度的空白影像（預設透明），透過設定 blank prop，並指定 width 和 height 值（以像素為單位）。您可以套用任何其他 <b-img> prop 來變更已產生影像的樣式/行為。

使用 blank-color prop 設定空白影像顏色。 blank-color prop 可以接受任何 CSS 顏色值

命名顏色—亦即 orange 或 blue
十六進制顏色—亦即 #FF9E2C
RGB 和 RGBa 顏色—亦即 rgb(255, 158, 44) 和 rgba(255, 158, 44, .5)
HSL 和 HSLa 顏色—亦即 hsl(32, 100%, 59%) 和 hsla(32, 100%, 59%, .5)

預設 blank-color 為 transparent。

<template>
  <div>
    <b-img v-bind="mainProps" alt="Transparent image"></b-img>
    <b-img v-bind="mainProps" blank-color="#777" alt="HEX shorthand color image (#777)"></b-img>
    <b-img v-bind="mainProps" blank-color="red" alt="Named color image (red)"></b-img>
    <b-img v-bind="mainProps" blank-color="black" alt="Named color image (black)"></b-img>
    <b-img v-bind="mainProps" blank-color="#338833" alt="HEX color image"></b-img>
    <b-img v-bind="mainProps" blank-color="rgba(128, 255, 255, 0.5)" alt="RGBa color image"></b-img>
    <b-img v-bind="mainProps" blank-color="#88f" alt="HEX shorthand color (#88f)"></b-img>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mainProps: { blank: true, width: 75, height: 75, class: 'm1' }
      }
    }
  }
</script>

<!-- b-img-blank.vue -->

註解

如在空白影像模式下僅設定寬度或高度其一，該影像的寬度和高度會設定為相同的值。
如在空白影像模式下並未設定寬度和高度，系統會將寬度和高度都設定為 1。
將優先使用 blank 屬性，而非 src 屬性。若您同時設定兩者，而且稍後設定 blank 為 false，則會顯示於 src 中指定的圖片。
空白圖片是用 SVG 圖片資料網址來呈現。
屬性 width 和 height 也會將 width 和 height 屬性套用到呈顯出來的 <img> 標籤，即使未設定 blank 也一樣。

`srcset` 支援

<b-img> 支援圖片上的 srcset 和 sizes 屬性。屬性接受字串值，或字串陣列 (字串陣列將轉換成單一字串，並以逗點分隔)。

有關這些屬性用法的詳細資訊，請參閱 MDN 的回應式圖片指南。

註解

如果設定 blank 屬性，則會略過 srcset 和 sizes 屬性
IE 11 不支援 srcset 和 sizes，因此請確保您有 src 屬性的值
Vue-loader 不支援 srcset 屬性上的專案相對 URL (資產 URL)。請使用 require(...) 來解決個別的 URL 路徑。請小心不要建立長度超過瀏覽器最大屬性值長度限制的資料 URI 字串。如果您的 webpack 設定對 url-loader 有限制，而且您想防止內嵌資料網址，您可能必須覆寫 loader 限制： require('!!url-loader?limit=0!./assets/photo.jpg')
在 2.1.0 版本中新增支援 srcset 和 sizes

延遲載入圖片

使用我們補充的 <b-img-lazy> 圖片元件 (根據 <b-img>) 以延遲載入圖片，因為這些圖片是用捲軸捲入檢視範圍 (或在視窗的 offset 像素內) 內。

延遲載入圖片使用 IntersectionObserver (如果瀏覽器支援，或透過多重載入) 來偵測圖片應該顯示的時間。如果 未偵測到 IntersectionObserver 支援，圖片會總是顯示。

用法

將 src 屬性設定為您想延遲載入的圖片網址，並透過屬性 blank-src 指定替代圖片網址，或保留 blank-src 為 null 來為您產生空白的替代圖片。

透過 blank-width 和 blank-height 屬性指定替代圖片的寬度和高度。如果未設定這些屬性，它們會回到 width 和 height 屬性 (適用於透過 src 指定的圖片)。

透過設定屬性 blank-color 來自訂所產生空白圖片的顏色。

填位圖像（明確提供或動態產生）應與 src 圖像有相同寬度和高度值，或至少有相同的縱橫比。

請隨時使用 fluid、fluid-grow、thumbnail 和 rounded props of <b-img>。

由 offset prop 指定，圖像需要距離視窗一定像素才會被觸發顯示。預設值為 360。

由 throttle prop 來控制在 scroll（或 resize、或 orientationchange、或 transitionend）事件發生後多少毫秒（ms），再檢查圖像是否已在視圖內（或視圖中的 offset 內）。預設值為 100（ms）。如果偵測到 IntersectionObserver 支援，則 throttle 沒有作用。

一旦圖像出現在視圖內並顯示出來後，就會移除事件監聽器和/或 Intersection Observer。

使用範例

<template>
  <div>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(80)" alt="Image 1"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(82)" alt="Image 2"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(84)" alt="Image 3"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(85)" alt="Image 4"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(88)" alt="Image 5"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(90)" alt="Image 6"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(92)" alt="Image 7"></b-img-lazy>
    <b-img-lazy v-bind="mainProps" :src="getImageUrl(94)" alt="Image 8"></b-img-lazy>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mainProps: {
          center: true,
          fluidGrow: true,
          blank: true,
          blankColor: '#bbb',
          width: 600,
          height: 400,
          class: 'my-5'
        }
      }
    },
    methods: {
      getImageUrl(imageId) {
        const { width, height } = this.mainProps
        return `https://picsum.photos/${width}/${height}/?image=${imageId}`
      }
    }
  }
</script>

<!-- b-img-lazy.vue -->

強制顯示延遲載入的圖像

若要強制顯示最後一張圖像，請將 show prop 設定為 true。 show prop 支援 Vue .sync 修飾，且將在顯示最後一張圖像時更新為 true。

延遲載入的 `srcset` 支援

<b-img-lazy> 支援在轉譯後的 <img> 元素上設定 srcset 和 sizes 屬性。這些 props 將只套用在圖像出現在視圖內後。

請見上方 srcset 支援以了解 props 使用方式的詳細資料和限制。

針對 srcset 和 sizes 的支援已在版本 2.1.0 中新增。

元件參考

`<b-img>`

函式元件

查看原始程式碼

<b-img> 屬性

屬性

所有屬性的預設值均為可全球設定。

屬性 (按一下進行遞增排序)	類型 (按一下進行遞增排序)	預設值	描述
`alt`	`字串`		要設定為 `alt` 屬性的值
`blank`	`布林值`	`false`	透過 SVG 資料 URI 建立空白或透明的圖像
`blank-color`	`字串`	`'transparent'`	將空白圖像的顏色設定為指定的 CSS 顏色值
`block`	`布林值`	`false`	強制圖像顯示為區塊元素，而非瀏覽器預設的內嵌區塊元素
`center`	`布林值`	`false`	將圖像置中排列
`fluid`	`布林值`	`false`	使圖像有回應能力。圖像會按需要縮小，或增長至圖像的原有寬度
`fluid-grow`	`布林值`	`false`	與 `fluid` prop 類似，但容許圖像縮放超過其原有寬度
`高度`	`Number` 或 `String`		要設定至影像「高度」屬性的值
`左方`	`布林值`	`false`	設定時將影像浮動至左側
`右方`	`布林值`	`false`	設定時將影像浮動至右側
`圓角`	`Boolean` 或 `String`	`false`	設定為「真」時，會將影像角度稍微調整成圓角。也可使用此功能停用圓角或將影像設為圓形/橢圓形。詳情請參閱文件
`大小` v2.1.0+	`Array` 或 `String`		由逗號分隔的一或多個字串（或字串陣列），指出來源大小的集合。可選擇與 srcset 屬性結合使用
`來源`	`字串`		要設定為 `src` 屬性的 URL
`srcset` v2.1.0+	`Array` 或 `String`		由逗號分隔的一或多個字串（或字串陣列），指出使用者代理程式可使用的各種影像來源
`縮圖`	`布林值`	`false`	在影像周圍新增縮圖框線
`寬度`	`Number` 或 `String`		要設定至影像「寬度」屬性的值

`<b-img-lazy>`