在现代的 Web 开发中，使用云存储的图片和视频已经成为普遍的做法。@cloudinary/angular-4.x 是一个第三方的 Angular 模块，它为 Angular 应用提供了一个简单的方式来与 Cloudinary 的 API 进行交互，并将云端存储的图片、视频等媒体文件集成到 Angular 应用中。
在本文中，我们将学习如何使用 @cloudinary/angular-4.x 模块来与 Cloudinary 进行交互，并在 Angular 应用中展示云端存储的媒体文件。本文将会从以下几个方面进行介绍：
- @cloudinary/angular-4.x 模块的安装和配置
- 如何上传和管理媒体文件到 Cloudinary
- 在 Angular 应用中使用 @cloudinary/angular-4.x 模块展示云端媒体文件
安装和配置 @cloudinary/angular-4.x 模块
首先需要安装 @cloudinary/angular-4.x:
npm install @cloudinary/angular-4.x --save
@cloudinary/angular-4.x 模块依赖 cloudinary-core，可以使用下面的命令来安装它：
npm install cloudinary-core --save
在 app.module.ts 中引入模块：
-- -------------------- ---- -------
------ - ----------------- ----------------------- - ---- --------------------------
------ - ---------- - ---- ------------------
-- ----- ---------- -----
------ ----- ----------------- ----------------------- - -
----------- -----------------------
-------- ---------------
----------- -----------------
--
-- -- ---------------- --- ------------------
-----------
-------- -
-------------------------- ---------- -- -----------------
--
-- ---
--
------ ----- --------- - -上传和管理媒体文件到 Cloudinary
在 Cloudinary 管理界面上传文件，上传成功后会得到一个 URL 地址，可以使用 HTTP 的方式获取这个地址的资源，但是这种方式会带来很多问题，如加载速度慢、带宽消耗大等，此时可以使用 Cloudinary 的 API 来上传和管理媒体文件。
下面是一个使用 Angular 测试 HTTP 的代码片段：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- ------------------
------ - --- - ---- -----------------
----- ------------- - ---------------------
----- ---------- - ------------------
-------------
------ ----- ----------------- -
------------------- ----- ----------- --
----------------- ------ ------------------ -
----- -------- - --- -----------
----------------------- -----------
-------------------------------- ---------------
----- --- - -------------------------------------------------------------
------ ------------------- ---------------
-------------- ---- -- -------------------- -- ---------- --- --
--
-
-在 Angular 应用中使用 @cloudinary/angular-4.x
@cloudinary/angular-4.x 提供了一个 cl-image 元素，可以通过它来展示媒体资源。下面是一个简单的使用示例：
<cl-image public-id="sample.jpg"></cl-image>
这将显示带有 public-id 为 sample.jpg 的 Cloudinary 图片，并且自适应大小。
如果需要根据屏幕大小或父元素的大小来调整图片大小，可以使用 ng-style 带入一个 JavaScript 的对象，如下所示：
<cl-image public-id="sample.jpg" [ng-style]="{ 'max-width.px': 300 }"></cl-image>这将根据元素的大小来自适应调整图片大小，并且最大宽度为 300 像素。
总结
在本文中，我们学习了如何使用 @cloudinary/angular-4.x 模块来与 Cloudinary 进行交互，以及如何在 Angular 应用中使用 cl-image 元素来展示云端存储的媒体资源。通过本文，您应该已经具备了基本的 Cloudinary 图片管理知识，并且能够方便地在 Angular 应用中使用 Cloudinary 提供的 API 来进行媒体文件的管理和展示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672981e8991b448e3ab4