BootstrapVueの画像コンポーネントは、丸みを帯びた画像、サムネイルスタイル、配置、さらにはオプションの単色背景を持つ空白画像の作成もサポートしています。遅延読み込み画像のサポートは、補完的な`<b-img-lazy>コンポーネントを介して利用できます。
画像srcの解決
`src` プロパティ（および`<b-img-lazy>の`blank-src` プロパティ）は、標準では絶対URLまたは完全修飾ドメイン名URLでのみ機能します。プロジェクトアセットを画像ソースとして使用している場合は、`vue-loader` を設定して、画像ソースを指定するカスタムコンポーネントプロパティを認識させる方法については、コンポーネント画像srcの解決を参照してください。
画像のスタイル設定
レンダリングされた画像要素のスタイル設定には、いくつかのプロパティを使用できます。以下のセクションでは、さまざまなオプションについて説明します。
レスポンシブな画像
BootstrapVueの画像は、`fluid` プロパティ（CSSクラスを使用して`max-width: 100%; height: auto;` を設定）を使用してレスポンシブにすることができます。これにより、画像の最大ネイティブ幅まで、親要素に合わせてスケーリングされます。
<div>
<b-img src="https://picsum.photos/1024/400/?image=41" fluid alt="Responsive image"></b-img>
</div>
コンテナの幅いっぱいに拡大する流動的な画像を作成するには、`fluid-grow` プロパティを使用します。ただし、小さなビットマップ画像ではぼやける可能性があることに注意してください。
<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>
`block` プロパティを使用して、画像をブラウザのデフォルトのインラインブロック要素ではなく、ブロック要素として強制的に表示させることができます。
**注記:** _Internet Explorer 10では、`fluid` を使用したSVG画像は不釣り合いにサイズ変更されます。これを修正するには、必要に応じて`width: 100% \9;` スタイルを追加します。この修正は他の画像形式のサイズを不適切に変更するため、Bootstrap v4では自動的に適用されません。_
画像サムネイル
`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>
角丸
`rounded` プロパティに次のいずれかの値を設定して、どの角を丸めるかを制御できます。
- `
true` （またはプロパティが値なしで存在する場合）：すべての角を丸める - `
false` （またはプロパティが存在しない場合）：明示的な角丸なし（デフォルト） - `
'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>
画像の配置
ブール値のプロパティ`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>
中央寄せ（ブロック）
<div>
<b-img center src="https://picsum.photos/125/125/?image=58" alt="Center image"></b-img>
</div>
注記：`left` は`right` よりも優先され、`right` は`center` よりも優先されます。
空白（または単色）画像
`<b-img>` は、`blank` プロパティを設定し、`width` と`height` の値（ピクセル単位）を指定することで、任意の幅と高さの空白画像（デフォルトでは透明）を生成するための組み込みサポートを提供します。他の`<b-img>` プロパティを適用して、生成された画像のスタイル/動作を変更できます。
`blank-color` プロパティを使用して、空白画像の色を設定します。`blank-color` プロパティは、任意のCSSカラー値を受け入れます。
- 名前付きの色 - 例：`
orange` または`blue` - 16進数の色 - 例：`
#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>
注記
- 空白画像モードでは、widthまたはheightのいずれか一方のみが設定されている場合、画像のwidthとheightの両方に同じ値が設定されます。
- 空白画像モードでwidthとheightが設定されていない場合、widthとheightの両方が内部的に1に設定されます。
- `
blank` プロパティは`src` プロパティよりも優先されます。両方とも設定し、後で`blank` を`false` に設定すると、`src` で指定された画像が表示されます。 - 空白画像は、SVG画像データURLを使用してレンダリングされます。
- `
width` と`height` プロパティは、`blank` が設定されていない場合でも、レンダリングされた`<img>` タグに`width` と`height` 属性を適用します。
`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` の制限があり、インラインデータURLを回避したい場合は、ローダーの制限を上書きする必要がある場合があります。`require('!!url-loader?limit=0!./assets/photo.jpg')` - `
srcset` と`sizes` のサポートは、`2.1.0` リリースで追加されました。
遅延読み込み画像
補完的な`<b-img-lazy>` 画像コンポーネント（`<b-img>` をベースに）を使用して、画像がビューポートにスクロールされたとき（またはビューポートの`offset` ピクセル以内）に遅延読み込みします。
遅延読み込み画像は、ブラウザでサポートされている場合（またはポリフィルを介して）、`IntersectionObserver` を使用して、画像を表示する必要があるかどうかを検出します。`IntersectionObserver` のサポートが_検出されない_場合、画像は_常に_表示されます。
使用方法
遅延読み込みする画像のURLをsrcプロパティに設定します。プレースホルダー画像のURLはblank-srcプロパティで指定するか、blank-srcをnullのままにして、空のプレースホルダー画像を自動生成させることができます。
blank-widthおよびblank-heightプロパティでプレースホルダーの幅と高さを指定します。これらのプロパティが設定されていない場合、srcで指定された画像に適用されるwidthおよびheightプロパティにフォールバックします。
blank-colorプロパティを設定することで、生成される空の画像の色を制御できます。
プレースホルダー画像（明示的に提供されたもの、または動的に生成されたもの）は、src画像と同じ幅と高さの値、または少なくとも同じアスペクト比を持つ必要があります。
<b-img>のfluid、fluid-grow、thumbnail、roundedプロパティを自由に使用できます。
offsetプロパティは、画像が表示されるトリガーとなるためにビューポートに近づく必要があるピクセル数を指定します。デフォルト値は360です。
throttleプロパティは、scroll（またはresize、orientationchange、transitionend）イベントが発生してから、画像が視野内（または視野のoffset以内）に入ったかどうかを確認するまでの時間（ミリ秒）を制御します。デフォルトは100（ミリ秒）です。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>
遅延読み込み画像の強制表示
最終的な画像の表示を強制するには、showプロパティをtrueに設定します。showプロパティはVueの.sync修飾子をサポートしており、最終的な画像が表示されるとtrueに更新されます。
遅延読み込みsrcsetのサポート
<b-img-lazy>は、レンダリングされた<img>要素にsrcsetおよびsizes属性を設定することをサポートしています。これらのプロパティは、画像が表示範囲内に入った後にのみ適用されます。
プロパティの使用の詳細と制限については、上記のsrcsetのサポートを参照してください。
srcsetとsizesのサポートは、2.1.0リリースで追加されました。