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

Look & Feel

01_lookNfeel

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

1

  • 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;

03_getProperties

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

04_setProperties

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

05_updateProperties

使用实例

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

06_example_ui

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

07_example_1

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

07_example_2

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

07_example_3

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

result

Was this article helpful?

AppMaster.io 101 速成班

10 模块
2 周数

不知道从哪里开始?通过我们的初学者速成课程,从A到Z探索AppMaster。

开始课程
Development it’s so easy with AppMaster!

需要更多帮助?

在我们专家的帮助下解决任何问题。节省时间并专注于构建您的应用程序。

headphones

联系支持

告诉我们您的问题,我们会为您找到解决方案。

message

社区聊天

在我们的聊天中与其他用户讨论问题。

加入社区