Image 画像 - Vant 4
🖼️ Image 画像
🎯 概要
Image コンポーネントは img タグのスーパーヒーローバージョンのようなものです 🦸♂️！生の img の全ての機能を持つだけでなく、さまざまな画像のフィットモード、遅延読み込み、読み込み状態の通知などの強力な機能が追加されています。すべての画像が最適な状態でユーザーに表示されるようにし、読み込みに失敗したときの困惑や待ち時間のストレスを解消します！
📦 導入
以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法については、コンポーネントの登録を参照してください。
import { createApp } from'vue'; import { ImageasVanImage } from'vant'; const app = createApp(); app.use(VanImage);🚀 コードの例
🔧 基本的な使い方
基本的な使い方は生の img タグと同じで、src、width、height、alt などの生の属性を設定できます。馴染みのある古い友人を使うように簡単です！
🎨 フィットモード
fit 属性で画像のフィットモードを設定できます。これは生の object-fit 属性と同じです。コンテナ内で最適な姿勢を見せるために、画像に異なる「服装スタイル」を選択するようなものです！
📍 画像の位置
position 属性で画像の位置を設定できます。fit 属性と組み合わせて使用すると、生の object-position 属性と同じになります。画像に最適な「撮影位置」を設定するようなものです！
⭕ 丸い画像
round 属性で画像を丸くできます。普通の画像を瞬時に優雅な丸いプロフィール写真に変えます！画像の幅と高さが等しくなく、fit が contain または scale-down の場合、完全な円を埋めることができないことに注意してください。
🚀 画像の遅延読み込み
lazy-load 属性を設定して画像の遅延読み込みを有効にすると、画像に「スマートセンサー」が取り付けられたようになり、ユーザーが見ようとしているときにのみ読み込みを開始し、ページのパフォーマンスが大幅に向上します！Lazyload コンポーネントと組み合わせて使用する必要があります。
import { createApp } from'vue'; import { Lazyload } from'vant'; const app = createApp(); app.use(Lazyload);⏳ 読み込み中の通知
Image コンポーネントはデフォルトの読み込み中の通知を提供します。ユーザーに親切な「お待ちください」の通知を与えるようなものです！loading スロットで内容をカスタマイズでき、待ち時間も楽しくなります。
❌ 読み込み失敗の通知
Image コンポーネントはデフォルトの読み込み失敗の通知を提供します。画像の読み込みに問題が発生した場合、空白または破損したアイコンではなく、優雅にフレンドリーな通知が表示されます。error スロットで内容をカスタマイズできます。
API
Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| src | 画像リンク | string | - |
| fit | 画像のフィットモード。生の object-fit 属性と同等 | string | fill |
| position | 画像の位置。生の object-position 属性と同等。top``right``bottom``left または string から選択可能 | string | center |
| alt | 代替テキスト | string | - |
| width | 幅。デフォルトの単位は px | number | string | - |
| height | 高さ。デフォルトの単位は px | number | string | - |
| radius | 角丸のサイズ。デフォルトの単位は px | number | string | 0 |
| round | 丸く表示するかどうか | boolean | false |
block 3.6.3 | ルートノードをブロック要素に設定するかどうか。デフォルトでは inline-block 要素 | boolean | false |
| lazy-load | 画像の遅延読み込みを有効にするかどうか。Lazyload コンポーネントと組み合わせて使用する必要があります | boolean | false |
| show-error | 画像の読み込み失敗通知を表示するかどうか | boolean | true | | show-loading | 画像の読み込み中通知を表示するかどうか | boolean | true | | error-icon | 失敗時の通知アイコンの名前または画像リンク。Icon コンポーネントの name 属性 と同等 | string | photo-fail | | loading-icon | 読み込み中の通知アイコンの名前または画像リンク。Icon コンポーネントの name 属性 と同等 | string | photo |
| icon-size | 読み込みアイコンと失敗アイコンのサイズ | number | string | 32px | | icon-prefix | アイコンのクラス名プレフィックス。Icon コンポーネントの class-prefix 属性 と同等 | string | van-icon |
| crossorigin | 生の crossorigin 属性と同等 | string | - | | referrerpolicy | 生の referrerpolicy 属性と同等 | string | - | | decoding v4.9.20 | 生の decoding 属性と同等 | string | - |
画像のフィットモード
| 名前 | 意味 |
|---|---|
| contain | アスペクト比を保持して画像をスケーリングし、画像の長い辺を完全に表示します |
| cover | アスペクト比を保持して画像をスケーリングし、画像の短い辺を完全に表示し、長い辺をトリミングします |
| fill | 画像を引き伸ばして要素を埋めます |
| none | 画像の元のサイズを保持します |
| scale-down | none または contain のうち小さい方を使用します |
イベント
| イベント名 | 説明 | コールバックパラメータ |
|---|---|---|
| click | 画像をクリックしたときにトリガーされます | event: MouseEvent |
| load | 画像の読み込みが完了したときにトリガーされます | event: Event |
| error | 画像の読み込みに失敗したときにトリガーされます | - |
スロット
| 名前 | 説明 |
|---|---|
| default | 画像の下のカスタムコンテンツ |
| loading | 読み込み中のカスタム通知コンテンツ |
| error | 読み込み失敗時のカスタム通知コンテンツ |
型定義
コンポーネントは以下の型定義をエクスポートしています：
importtype { ImageFit, ImagePosition, ImageProps } from'vant';テーマカスタマイズ
スタイル変数
コンポーネントは、カスタムスタイルに使用できる以下の CSS 変数を提供しています。使用方法については、ConfigProvider コンポーネントを参照してください。
| 名前 | デフォルト値 | 説明 |
|---|---|---|
| --van-image-placeholder-text-color | var(--van-text-color-2) | - |
| --van-image-placeholder-font-size | var(--van-font-size-md) | - |
| --van-image-placeholder-background | var(--van-background) | - |
| --van-image-loading-icon-size | 32px | - |
| --van-image-loading-icon-color | var(--van-gray-4) | - |
| --van-image-error-icon-size | 32px | - |
| --van-image-error-icon-color | var(--van-gray-4) | - |
よくある質問
ローカル画像を参照するにはどうすればよいですか？
.vue ファイルで相対パスを使用してローカル画像を参照する場合、画像のリンクを require() で囲む必要があります。これにより、画像 URL が webpack モジュールリクエストに変換され、file-loader または url-loader と組み合わせて処理されます。
より詳細な説明については、vue-loader のリソースパスの処理のセクションを参照してください。
image タグを使用するとレンダリングできませんか？
Image コンポーネントを使用するとき、<image> をタグ名として使用するとレンダリングできない問題が発生することがあります。たとえば、次のような記述：
これは \<image> タグが生の SVG タグであり、Vue が生のタグ名をコンポーネント名として登録することを許可していないためです。\<van-image> を使用すると、この問題を回避できます。
📚 関連文書
🖼️ メディアコンポーネント
- ImagePreview 画像プレビュー - 画像プレビューコンポーネント、Image コンポーネントと完璧に組み合わせます
- Swipe スライダー - スライダーコンポーネント、複数の画像を表示するための最適な選択
🚀 パフォーマンスの最適化
- Lazyload 遅延読み込み - 遅延読み込みコンポーネント、画像の読み込みパフォーマンスを向上させます
- Loading ローディング - ローディングコンポーネント、ユーザーの待ち時間の体験を最適化します
🎨 デザインコンポーネント
- Icon アイコン - アイコンコンポーネント、読み込みおよびエラー状態のアイコンを提供します
- ConfigProvider グローバル設定 - グローバル設定コンポーネント、テーマスタイルを統一的に管理します
🛠️ 開発ガイド
- Advanced Usage 高度な使い方 - 高度な使い方ガイド
- Theme テーマカスタマイズ - テーマカスタマイズガイド