React 中的车辆图像,在服务器上解析,作为道具传递,在每个网格中都稳定。

React 团队在同一个下午遇到两个问题:API 密钥绝不能到达浏览器,车辆网格在加载时不能跳动。解决密钥的位置,将 URL 发送到客户端,两个问题就不再存在。

LP react: hero1
LP react: hero2
LP react: s1

你的 API 密钥不应该出现在浏览器中

客户端组件的请求会将您的密钥暴露给任何打开开发者工具的人。在路由处理程序、服务器组件或您自己的后端中解析车辆,浏览器只会看到完成的图像 URL。

  • 密钥保存在服务器端,在环境变量中
  • 图像 URL 是普通字符串,可以安全地作为道具传递
  • 无需 CORS 配置,因为浏览器只加载图像

React 版本的集成

解决一次,传递 URL,让浏览器缓存。这里没有什么聪明的事情发生,这正是重点。

01
安装 SDK

npm i vehicleimagery,然后在您的密钥已存在的地方创建客户端,而不是在组件内部。

02
解析车辆

输入 VIN、车牌号或制造商、型号和年份。返回每个角度的图像 URL。

03
将 URL 作为道具传递

你的卡片接受一个字符串。没有提供者,没有上下文,没有客户端获取,没有加载水落。

04
锁定宽高比

固定比例包装器加上匹配渲染大小的宽度参数,可以在布局移动发生前将其消除。

LP react: s2

不会跳动的网格

车辆网格中的布局移动几乎总是由于图像未定尺寸。请求卡片实际渲染的宽度,将其包装在固定比例的框中,网格在首次绘制时就能稳定,而不是稳定两次。

  • 宽度、格式和质量是请求参数
  • 所有车辆的框架相同,因此单元格对齐
  • 透明的 WebP 覆盖暗黑模式,无需第二个资产

React 中的车辆图像,实践中

大多数 React 代码库从占位符图像开始,并承诺稍后修复。修复通常以卡片组件中的客户端获取请求的形式出现,问题就从这里开始:密钥暴露了,每张卡片都打开自己的请求,网格在不同时间到达的答案中重新流动。API 很快,但模式是错误的。

能够坚持下去的版本并不光鲜亮丽。在您已经加载列表数据的地方解析车辆,将生成的 URL 保存在列表对象上,然后让卡片渲染一个宽度与其布局匹配的 img 标签。浏览器通过 URL 缓存,CDN 处理其余部分,您的组件树完全不知道存在一个图像 API。

React 团队的需求

我可以从客户端组件调用 API 吗?

可以,但不应该。客户端组件在浏览器中运行,因此密钥会随之传输。在路由处理程序、服务器组件或后端中解析,并将 URL 作为属性传递下去。

它与 React 服务器组件兼容吗?

是的,这是最干净的集成方式。在加载列表的服务器组件内解析,然后直接渲染 URL。集成的任何内容都不会到达客户端包。

您提供 React 组件吗?

不,并且是故意的。npm 包与框架无关,并返回 URL。车辆图像是一个 img 标签,将其包装在我们控制的组件中只会妨碍您的设计系统。

如何防止布局移动?

为图像设置固定宽高比容器,并请求渲染的宽度。由于所有车辆的框架相同,一个比例适用于整个网格。

卡片在加载时应该显示什么?

相同宽高比的中性占位符。由于在渲染前已知 URL,图像通常不会出现可见的占位符步骤。

它与 React Native 兼容吗?

是的。这些 URL 是普通的 HTTPS 图像 URL,因此 Image 组件可以直接使用它们。在后端解析,就像你为网页所做的那样。

在分支中试用

告诉我们您的列表数据是什么样子的,以及您的卡片使用哪些尺寸。我们会返回可以直接放入组件的图像 URL。

  • 适合您的卡片宽度的 WebP 变体
  • 适用于暗黑模式的透明裁剪
  • 试用版涵盖一个真实的集成分支
谢谢。我们已经收到您的消息,并将为您的配置提供图像 URL。
出了点问题。请重试,或写信到 info@vehicleimagery.com。

在您的网格中放置真实的车辆

发送您数据中的几个 VIN 或规格以及您渲染的卡片宽度。您今天就可以将 URL 粘贴到分支中。

通常在同一工作日