车辆图像看起来像一种特殊的资产类别，直到你将它们集成，这时它们变成了前端想要的每个资产：带参数的 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) 封装这些调用。
规则一：服务器端解析，客户端渲染
唯一重要的架构决策：不要从浏览器调用 API。您的 API 密钥不应出现在客户端代码中，解析步骤（标识符输入，车辆输出）应在您的数据所在的位置进行。在后端或构建时解析车辆，将路径和签名 URL 与车辆记录一起存储，让组件接收图像 URL 作为普通属性。组件树永远不知道车辆 API 的存在；它渲染字符串。
- API 密钥保留在服务器端，密钥应属于此处
- 每辆车每次目录更新一次分辨率，而不是每次页面查看一次
- 组件保持简单、可测试且可移植到各种框架
响应式图像免费
因为尺寸是请求参数，srcset 只是同一个 URL 在三种宽度：请求 600、1200 和 2000 像素的变体，让浏览器选择。默认提供 format=webp；只有在画布或打印中真正需要透明度叠加时才回退到 PNG。列表网格上的负载差异显而易见。
区分优秀整合的细节
- 延迟加载折叠以下的所有内容；列表网格是经典的loading="lazy"用例
- 在 CSS 中保留纵横比，以便图像到达时网格不会重新流动
- 根据您已有的数据编写真实的替代文本：年份、品牌、型号、配置、颜色、角度
- 在您自己的存储或 CDN 中缓存图像 URL；在目录更新时重新解析，而不是在请求时
- 查看响应中的错误说明数组。API 会告诉你何时替换了备用选项，例如相邻的车型年份。
一個組件的全部工作
最终状态是乏味的，这正是重点：一个 VehicleImage 组件，接受解析后的 URL、宽度提示和替代文本，并渲染带有 srcset 和延迟加载的图像标签。所有的车辆智能都在数据层中，可以被缓存、记录和交换。如果你的组件知道什么是 VIN，边界就放错了地方。
加载和错误状态
在发布前，两种状态值得设计关注。图像加载时，固定比例的骨架保持卡片稳定，因为每辆车都是相同的框架，一个轮廓占位符适用于整个目录。当查找失败或车辆没有图像时，使用有意的品牌占位符代替破损的图像图标，并记录标识符，这样缺口就是数据票而不是谜题。
完整参数参考和响应形状在API 文档中；车辆图像 API 页面涵盖了通过 VIN、车牌和分辨率步骤查找。
