車両画像は統合するまで特別なアセットクラスのように見えますが、統合するとフロントエンドがすべてのアセットに求めるものになる：パラメータ付きのURL。この記事ではコンポーネントフレームワークの統合パターンを説明します。例はReactで読みますが、Vue、Svelte、その他の<img>タグをレンダリングするものでもパターンは同じです。
APIの形状
すべての画像は予測可能なパスにあります：ブランド、モデル、年、バリアント、トリム、そしてビュー。オプションはクエリパラメータとして渡されます。/api/Abarth/124_Spider_Abarth/2016/Basis/base/front_left?format=webp&width=1200のようなリクエストは、メタデータと画像タグに使用できる署名付きのimage_urlが含まれたJSONを返します。認証は単一のx-api-keyヘッダーです。これらの呼び出しをラップするnpmパッケージもあります（npm install vehicleimagery）。
ルール1：サーバー側で解決し、クライアント側でレンダリング
唯一重要なアーキテクチャの決定：ブラウザからAPIを呼び出さないこと。APIキーはクライアントコードに属さず、解決ステップ（識別子を入力し、車両を出力）はデータが存在する場所に属します。車両をバックエンドまたはビルド時に解決し、車両レコードとともにパスと署名付きURLを保存し、コンポーネントが通常のプロップとして画像URLを受け取るようにします。コンポーネントツリーは車両APIが存在することを知りません、文字列をレンダリングします。
- APIキーはサーバー側に残ります、キーが属する場所です
- カタログ更新ごとに一回の解像度、ページビューごとに一回ではない
- コンポーネントはダム、テスト可能、フレームワーク移植可能のまま
レスポンシブ画像は無料で提供
リクエストパラメータが次元であるため、srcset は同じ URL を 600、1200、2000 ピクセルの幅でリクエストし、ブラウザが選択するだけです。デフォルトで format=webp を提供し、キャンバスや印刷で透明度を合成する場合にのみ PNG にフォールバックします。リストグリッドのペイロードの違いは目立ちます。
優れた統合を実現する細部
- 折り返し以下のすべてを遅延読み込みします。リストグリッドは教科書的な loading="lazy" のケースです
- CSS でアスペクト比を予約して、画像が到着するたびにグリッドが再フローしないようにする
- 既に保有しているデータから実際のaltテキストを書きます：年、メーカー、モデル、トリム、色、角度
- 自社のストアやCDNに画像のURLをキャッシュし、カタログの更新時に再解決します。リクエストごとに行いません
- 応答の errornotes 配列を確認してください。API は、例えば隣接するモデルイヤーに置き換えた場合に通知します。
コンポーネントの全ての仕事
最終状態は退屈ですが、それが目的です：VehicleImageコンポーネントは解決されたURL、幅のヒント、altテキストを受け取り、srcsetと遅延読み込みを持つ画像タグをレンダリングします。すべての車両知能はデータ層にあり、キャッシュ、ログ、スワップできます。コンポーネントがVINを知っている場合、境界は間違った場所にあります。
読み込みとエラー状態
ローンチ前に設計に注意を払うべき二つの状態があります。画像が読み込まれている間は、固定比率のスケルトンがカードを安定させ、すべての車両が同一のフレーミングで出荷されるため、一つのシルエットプレースホルダーがカタログ全体に対応します。検索に失敗したり、車両に画像がない場合は、壊れた画像アイコンではなく、意図的なブランド付きプレースホルダーにフォールバックし、識別子をログに記録して、ギャップをデータチケットにするのではなく、謎にするのです。
パラメータの完全な参照とレスポンスの形状は、APIドキュメントにあります。VIN、ナンバープレートによる検索、解像度のステップについては、車両画像APIページがカバーしています。
