58云玻网

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 465|回复: 0

带有模板自定义组件的 Cloudinary 图像库

[复制链接]

1

主题

1

帖子

5

积分

新手上路

Rank: 1

积分
5
发表于 2023-9-17 19:11:00 | 显示全部楼层 |阅读模式
当您需要构建可在所有中使用的小型自定义 Web 组件时,Stencil 是一个理想的工具。Stencil 使您能够创建独立于平台的组件,这些组件可以导出为真正的 Web 组件并在任何地方使用。

查看我们的 StencilJS 帖子:

StencilJS 入门
以模板方式制作视频 Web 组件
本文介绍如何使用 Stencil 使用 Cloudinary 存储的图像构建图像库。Cloudinary是一种端到端图像和视频管理解决方案。Cloudinary Image API非常易于使用,并通过 HTTP URL 公开图像转换技术。如果你从未使用过Stencil,你可以从这篇文章开始。

设置媒体库和模板项目复制此标题的链接
让我们首先将一些图像上传到 Cloudinary 服务器并设置一个 Stencil 项目。

创建一个 Cloudinary 帐户复制此标题的链接
我们将使用 Cloudinary 仪表板上传图像。然而,在实际项目中,您应该有一个使用 Cloudinary SDK 上传这些图像的服务器。

通过注册免费 西班牙消费者手机号码列表 计划创建一个 Cloudinary 帐户,提供 300,000 张图像。云注册
在服务器仪表板/控制台上,单击导航栏中的“媒体库”。
使用媒体库页面上的图像上传小部件将图像添加到您的服务器。



云媒体库
创建模板项目复制此标题的链接
我们需要使用 Stencil 做的第一件事是为 Stencil 项目设置样板。幸运的是,Ionic团队提供了一个入门模板来简化此设置过程。您需要做的就是克隆此入门模板,安装模板并启动您的新项目:
链接
典型的图库应用程序或小部件需要数据源。大多数实际情况可能需要从服务器或 API 端点获取这些数据。在这个应用程序中不需要这样做。我们将创建一个模拟数据,看起来就像服务器发送给我们的数据。

的目录中创建src以下内容:

完整代码可在此处获取

只是一系列图库图像的导出。每个图库项目都表示为一个对象,其中包含图像 ID、收藏家/作者以及有关图像的描述。图像 ID ( imageId) 与您将图像上传到 Cloudinary 服务器时获得的 ID 相同。我们可以使用这些 ID 从 Cloudinary 获取图像。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|DiscuzX ( 鲁ICP备2024066306号 )

GMT+8, 2024-11-29 06:54 , Processed in 1.075296 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表