Изображения автомобилей выглядят как отдельный класс активов, пока вы их не интегрируете — после этого они оказываются тем, что хочет видеть фронтенд от каждого актива: URL с параметрами. В этой статье рассматривается шаблон интеграции для компонентных фреймворков. Примеры написаны на React, а шаблон идентичен для Vue, Svelte или чего-то еще, что рендерит тег <img>.
Форма API
Каждое изображение находится по предсказуемому пути: бренд, модель, год, вариант, комплектация, а затем вид. Опции передаются как параметры запроса. Запрос вроде /api/Abarth/124_Spider_Abarth/2016/Basis/base/front_left?format=webp&width=1200 возвращает JSON с метаданными и подписанным image_url, готовым для тега изображения. Аутентификация — это один заголовок x-api-key; также есть npm-пакет (npm install vehicleimagery), который оборачивает эти вызовы.
Правило одно: обрабатывать на сервере, отображать на клиенте
Единственное архитектурное решение, которое имеет значение: не вызывайте API из браузера. Ваш API-ключ не должен находиться в клиентском коде, а этап разрешения (идентификатор в, автомобиль на выходе) должен находиться там, где хранятся ваши данные. Разрешите автомобиль на сервере или на этапе сборки, сохраните путь и подписанный URL вместе с записью автомобиля, и дайте компонентам получать URL изображения как обычный пропс. Дерево компонентов никогда не узнает о существовании автомобильного API; оно отображает строки.
- Ключ API остается на сервере, где ему и место
- Одно разрешение на автомобиль на обновление каталога, а не одно на просмотр страницы
- Компоненты остаются простыми, проверяемыми и переносимыми на фреймворк
Отзывчивые изображения идут в комплекте
Поскольку размеры являются параметрами запроса, srcset — это тот же URL на трёх ширинах: запросите варианты 600, 1200 и 2000 пикселей и дайте браузеру выбрать. Предоставляйте format=webp по умолчанию; откажитесь от PNG только там, где действительно накладываете прозрачность на холст или печать. Разница в объёме данных на сетке объявлений не так уж мала.
Детали, которые отличают хорошие интеграции.
- Подгружайте всё, что находится ниже сгиба; сетка списка — это классический случай загрузки="lazy"
- Зафиксируйте соотношение сторон в CSS, чтобы сетка не перестраивалась по мере загрузки изображений
- Напишите реальный альтернативный текст из данных, которые вы уже храните: год, марка, модель, комплектация, цвет, угол
- Кэшируйте URL-адреса изображений в вашем собственном хранилище или CDN; повторно разрешайте при обновлении каталога, а не при запросе
- Проверьте массив errornotes в ответах. API сообщает, когда он подставляет резервный вариант, например, соседний год модели
Вся работа компонента
Конечное состояние скучное, что и есть цель: компонент VehicleImage, который принимает разрешенный URL, подсказку ширины и альтернативный текст, и отображает тег изображения с srcset и ленивой загрузкой. Вся информация об автомобиле находится в слое данных, где ее можно кэшировать, логировать и заменять. Если ваш компонент знает, что такое VIN, граница находится не там.
Состояния загрузки и ошибок
Два состояния заслуживают внимания дизайнера перед запуском. Пока загружается изображение, скелет с фиксированным соотношением сохраняет карточку стабильной, и поскольку каждый автомобиль поставляется в идентичной рамке, один силуэт-заполнитель подходит для всего каталога. Когда поиск не удается или у автомобиля еще нет изображения, используйте брендированный заполнитель вместо иконки сломанного изображения, и записывайте идентификатор, чтобы пробел стал тикетом данных, а не загадкой.
Полные параметры и формы ответов находятся в документации API; страница API для изображений автомобилей охватывает поиск по VIN, номеру и поиск шага разрешения.
