Команды React сталкиваются с двумя проблемами в один и тот же день: ключ API никогда не должен попасть в браузер, и сетка автомобилей не должна прыгать при загрузке. Решите, где живут ваши секреты, отправьте URL клиенту, и обе проблемы перестанут существовать.
Запрос от клиентского компонента передает ваш ключ любому, кто открывает devtools. Разрешите автомобили в обработчике маршрута, серверном компоненте или вашем собственном бэкенде, и браузер видит только готовые URL-адреса изображений.
Решите один раз, передайте URL вниз, дайте браузеру кэшировать. Здесь ничего умного не происходит, и это как раз кстати.
npm i vehicleimagery, затем создайте клиент там, где уже живут ваши секреты, а не внутри компонента.
Введите VIN, номерной знак или марку, модель и год. Возвращаются URL-адреса изображений под любым углом.
Ваша карта принимает строку. Никаких провайдеров, контекстов, клиентской загрузки или водопада загрузки.
Фиксированный контейнер с соотношением сторон плюс параметр ширины, соответствующий отображаемому размеру, устраняет сдвиг макета до его возникновения.
Встройте изображения автомобилей в свой продукт без лишней работы. Понятная документация, открытые SDK и готовые плагины подключаются к вашему стеку за минуты, а страница состояния показывает вживую, как чувствует себя API.
Сдвиг макета в сетке автомобилей почти всегда вызван неразмеренным изображением. Запросите ширину, которую фактически рендерит карточка, оберните её в контейнер с фиксированным соотношением сторон, и сетка устанавливается при первом отображении, а не дважды.
Большинство кодовых баз React начинаются с заполнителя изображения и обещания исправить это позже. Обычно исправление приходит в виде клиентского запроса внутри компонента карточки, и именно здесь начинаются проблемы: ключ открыт, каждая карточка открывает свой запрос, и сетка перестраивается по мере поступления ответов в разное время. API быстрый, но шаблон неправильный.
Рабочая версия неброская. Определяйте автомобили там, где вы уже загружаете данные списка, сохраняйте полученные URL-адреса на объекте списка и позволяйте карточкам отображать тег img с шириной, соответствующей их макету. Браузер кэширует по URL, CDN берет на себя остальное, а ваше дерево компонентов перестает знать, что существует API изображений.
Можно, но не стоит. Клиентский компонент работает в браузере, поэтому ключ путешествует вместе с ним. Разрешайте в обработчике маршрута, серверном компоненте или на бэкенде и передавайте URL-адреса в виде props.
Да, и это самое чистое решение. Определите внутри серверного компонента, который загружает список, а затем отобразите URL-адрес напрямую. Ничего из интеграции не достигает клиентского пакета.
Нет, и специально так. Пакет npm фреймворк-независимый и возвращает URL. Изображение автомобиля — это тег img, и оборачивание его в компонент, который мы контролируем, только помешает вашей системе дизайна.
Дайте изображению контейнер с фиксированным соотношением сторон и запросите ширину, которую вы рендерите. Поскольку обрамление идентично для всех автомобилей, одно соотношение подходит для всей сетки.
Нейтральный заполнитель с тем же соотношением сторон. Поскольку URL известен до рендеринга, изображения обычно загружаются без видимого шага заполнителя.
Да. Это обычные HTTPS-URL изображения, поэтому компонент Image обрабатывает их напрямую. Разрешайте на бэкенде, точно так же, как и для веб-сайта.
Расскажите, как выглядят ваши данные списка и какие размеры используются в карточках. Мы вернем URL-адреса изображений, готовые к вставке в ваши компоненты.
