車の画像は、統合するまで特別なアセットクラスのように見えます。統合すると、フロントエンドがすべてのアセットに求めるものになるのです：パラメータ付きの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ドキュメントにあります。車両画像APIページでは、VIN、ナンバープレートによる検索と解像度のステップについて説明しています。
