如何在网络应用中使用图像

本教程介绍了 Image 本教程描述了组件在Web应用程序中的用法。

Look & Feel

• Upload- 可以通过按下按钮并从文件系统中选择一个图像来预先定义一个图像。

• Image alt[ string]- 也称为alt标签和alt描述，alt文本是在用户的屏幕上无法加载图像时，代替图像出现在网页上的书面副本。这种文本有助于屏幕阅读工具向有视觉障碍的读者描述图像，并使搜索引擎能够更好地抓取和排名你的网站。
• Width[ string]- 默认情况下的图像宽度。
• Height[ string]- 默认情况下的图像高度。
• Visible[ boolean]- 定义了图像是否可见。
• Name[ string]- 组件的名称。

相关的业务流程

HTML中的Image是对图像对象本身的引用。因此，Image总是与链接一起工作，为了使用图像数据，你需要获得它的链接。

下列内容 BPs 是为网络应用程序的使用而预先生成的。

• Image Get Properties- 获取图像属性。
  • Component ID[ string]- 组件的标识符。
  • Width[ string]- 图像宽度。
  • Height[ string]- 图像高度。
  • Image URL[ string]- 图像的URL-地址。
  • Tooltip[ string]- 悬停时显示的tooltip字符串。
  • Visible[ boolean]- 定义图像是否可见。
  • Loading[ boolean]- 将图像设置为 " 加载"状态，如果 true;

• Image Set Properties- 重置所选图像的所有属性并设置给定的属性。
  • Component ID[ string]- 组件的标识符。
  • Width[ string]- 图像宽度。
  • Height[ string]- 图像高度。
  • Image URL[ string]- 图像的URL-地址；。
  • Tooltip[ string]- 悬停时显示的tooltip字符串。
  • Visible[ boolean]- 定义图像是否可见。
  • Loading[ boolean]- 将图像设置为 " 加载"状态，如果 true;

• Image Update Properties- 更新图像属性。
  • Component ID[ string]- 组件的标识符。
  • Width[ string]- 图像宽度。
  • Height[ string]- 图像高度。
  • Image URL[ string]- 图像的URL-地址。
  • Tooltip[ string]- 悬停时显示的tooltip字符串。
  • Visible[ boolean]- 定义图像是否可见。
  • Loading[ boolean]- 将图像设置为 " 加载"状态，如果 true;

使用实例

考虑一个加载用户资料头像的例子。网页界面由一个图像和一个触发BP的按钮组成，看起来像这样。

BP开始于 onClick 触发。为了从用户的设备文件系统中提取文件 Select Files 块被使用( Max files = 1, File types = Image).如果文件被成功挑选，数组元素以 index=0 来进行挑选。

结果文件元素的 Files 数组必须被上传到网络应用程序服务器以便进一步使用（ Server request POST /_files/）。如果请求是成功的，在该块输出的文件对象将被传递到该块的输入。 Server request POST /_files/ 块的输出的文件对象被传递到 Expand file 块的输入，以获得其 ID.

为了得到URL，你需要把文件的 ID 并将其值转换为一个字符串( To String).相对的文件路径将是 /api/_files//download/.因此，要上传图片，文件路径必须被传到 Image URL 的属性中。 Image Update Properties 块中。

发布的应用是在下面的例子中