html - 如何为 picture 元素自动生成调整大小的图像和 HTML 标记？

Question

我正在尝试自动调整图像大小和为这些生成的图片生成 HTML 标记的构建过程。问题是我不知道如何做后一部分。

我用过插件 gulp-responsive用于调整任意数量的图像。虽然，这不是健康工作流程，因为我仍然需要对 HTML 进行硬编码 <picture>对于他们每个人。

除此之外，我还阅读了 Cloudinary 的 API，它可以调整图像的大小和艺术指导图像(一种比 Gulp 插件更好的方法)。问题是在阅读了 API docs 之后对于 Node.js，我看不到如何自动生成 HTML 标记(就像在 this site 中一样)，甚至无法下载生成的图像。

Answer 1

您可以通过 API 或通过 UI 在 Cloudinary 中上传资源。如果您使用 API，那么您将获得一个 JSON 响应，其中包含可在 HTML 中使用的资源 URL。像这样:https://cloudinary.com/documentation/image_upload_api_reference#upload_method (阅读示例响应)

如果您使用媒体库 UI 上传资源:https://cloudinary.com/console/media_library/folders/all/然后您将在打开图像(缩略图右上角的编辑图标)或图像缩略图上有一个小图钉时看到该 URL，您可以单击它，它会自动复制图像 URL。