功能分类: 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 网络链接。 |
没有返回值。只在显示结果页面体现代码执行前后变化。
url
如果为网络连接,需要填写完整路径,如以 http:// 或 https:// 开头的路径。设计
模式下通过拖拽的方式添加到屏幕页面,并设置其属性。