setImageURL(id, url) 设置图片链接

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

设置指定 id 图片控件里的图片链接。

图片控件显示的图片并不是固定不变的，它们根据设置及用户操作是可以变化的。setImageURL() 就是用来修改图片控件里显示图片的图片链接，从而可以使图片控件里显示的图片发生变化。

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

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

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

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

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

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

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

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

示例代码


// Change the image element from the Code.org logo to the dog character.
// 创建一个 id 为 image 的图片控件，并显示校外课 logo
image("image", "https://xiaowai.co/images/logo.png");
setImageURL("image", "https://studio.xiaowai.co/blockly/media/skins/applab/static_avatar.png");

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


// 点击按钮，让图片在小狗和蜜蜂之间切换
var imageId = "character";
var dogImageURL = "https://studio.xiaowai.co/blockly/media/skins/applab/static_avatar.png";
var beeImageURL = "https://studio.xiaowai.co/blockly/media/skins/bee/static_avatar.png";
image(imageId, dogImageURL);
var currentImage="dog";
button("changeButton", "Change Character");
onEvent("changeButton", "click", function(event) {
  if (currentImage == "dog") {
    setImageURL(imageId, beeImageURL);
    currentImage="bee";
  } else {
    setImageURL(imageId, dogImageURL);
    currentImage="dog";
  }
});

语法规则


setImageURL(id, url);

参数说明

名称	类型	必需	参数描述
id	string	Yes	screen 屏幕控件的 id 唯一标识。必须以字母开头，不能包含空格，可以包含字母、数字、减号 - 以及下划线 _ 。
url	string	Yes	指定 image 图片控件里显示图片的 url 网络链接。

返回值

布尔型，true 或 false。设置成功返回 true，否则返回 false。

提示说明

为 image 图片控件指定 url 如果为网络连接，需要填写完整路径，如以 http:// 或 https:// 开头的路径。
使用 hideElement() 方法隐藏屏幕上的 image 图片控件。

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