image(id, url) 创建图片控件

功能分类： UI Controls Applab JavaScript 少儿编程

创建指定 id 并显示指定 url 链接的 image 图片控件。

现在的很多 APP 应用除了使用 textInput 文本输入框、textLabel 文本标签、button 按钮、dropdown 下拉选框等控件，还需要其他的形式来体现更好的视觉效果。在 APP 里使用 image 图片控件，让它们动态显示，甚至为其增加用户互动响应，可以让 APP 带来更好的用户体验。在用户互动方面，需要通过 onEvent() 方法来创建，并指定好相关图片控件的 id 。

在使用 image(id, url) 方法创建图片控件时，使用第二个参数 url 来指定在控件里显示图片的链接。这个链接可以通过下面两种方式填写。

1. 使用互联网图片：直接复制互联网图片链接。

在多数网页浏览器里，在显示图片的上方，点击鼠标右键后会出现几个图片相关的操作选项，其中一个选项就是复制图片链接。将复制的链接放在代码里作为 url 参数，这样就可以在你的 APP 里显示这张图片了。

2. 使用自己的图片：上传自己的图片到 Applab。

你也可以将自己电脑里的图片在 Applab 里上传到你的项目，将上传后图片的文件名作为 url 参数，这样也可以在你的 APP 里显示这张图片。具体做法是：

找到相关代码模块里的 url 参数项，点击参数项右边的下拉按钮，并点击 选择... 选项：

在弹出的窗口里，点击 上传图片文件 按钮。

选择你电脑里的图片文件并上传。
成功上传后，弹出窗口里会显示所有上传图片的列表。找到相关图片并点击图片右侧的 选择 按钮，图片文件名会自动填写到代码模块里并作为 url 参数。

示例代码


// 创建一个 id 为 logo 的图片控件，并显示校外课 logo
image("logo", "https://xiaowai.co/images/logo.png");

示例代码：图片切换 点击按钮，让图片在小狗和蜜蜂之间切换


// 点击按钮，让图片在小狗和蜜蜂之间切换
var dogURL="https://studio.xiaowai.co/blockly/media/skins/applab/static_avatar.png";
var beeURL="https://studio.xiaowai.co/blockly/media/skins/bee/static_avatar.png";

image("character", dogURL);
button("changeButton", "Change Character");

onEvent("changeButton", "click", function(event) {
  var currentCharacterURL = getImageURL("character");
  if (currentCharacterURL == dogURL) {
    setImageURL("character", beeURL);
  } else {
    setImageURL("character", dogURL);  }
});

语法规则


image(id, url);

参数说明

名称	类型	必需	参数描述
id	string	Yes	image 图片控件的 id 唯一标识。在事件响应处理时以及其他涉及修改控件属性的方法里，通过这个 id 可以唯一定位到控件。必须以字母开头，不能包含空格，可以包含字母、数字、减号 - 以及下划线 _ 。
url	string	Yes	指定要加载到屏幕里图片文件的上传文件名或 url 网络链接。

返回值

没有返回值。只在显示结果页面体现代码执行前后变化。

提示说明

为 image 图片控件指定 url 如果为网络连接，需要填写完整路径，如以 http:// 或 https:// 开头的路径。
如果在屏幕的（0,0）位置已经有别的控件，image 图形控件会被放置到原有控件的右侧或下方，紧挨原有控件放置。
可以用于修改显示控件属性的方法有：setImageURL()、showElement()、hideElement()、deleteElement()、setPosition()、setSize()。
可以用于获取显示控件状态或属性值的方法有：getImageURL()、getXPosition()、getYPosition()。
image 图形控件也可以在 设计 模式下通过拖拽的方式添加到屏幕页面，并设置其属性。

查看更多少儿编程教程、JavaScript 介绍