# setImageURL vs drawImageURL

**URL:** <https://forum.code.org/t/setimageurl-vs-drawimageurl/34609>\
**Category:** Coding and Debugging Help\
**Created:** [April 19, 2021, 8:37pm UTC](https://forum.code.org/t/setimageurl-vs-drawimageurl/34609 "2021-04-19T20:37:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![johngouk](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/johngouk/32/6696_2.png) [@johngouk](https://forum.code.org/u/johngouk)\
**Post date:** [April 19, 2021, 8:37pm UTC](https://forum.code.org/t/setimageurl-vs-drawimageurl/34609/1 "2021-04-19T20:37:53Z")

</div>

I want to be able to click on an image to provide more info on the picture - currently using spacexdata crew info, driven by the spacexdata API and JSON results, clicking on the crew member picture e.g. [https://i.imgur.com/ooaayWf.png](https://i.imgur.com/ooaayWf.png). I am perfectly able to load that URL into a canvas using drawImageURL(url).

However, I can’t seem to get onEvent(“myCanvas”,“click”, handleCanvasClickFunction) to work - it doesn’t ever generate an event when I click on the canvas.

As a workaround, I tried using a Button with an image instead, but this refuses to load the image URL! It appears not to be able to load any image programmatically. It does load the image if I specify it in the Design mode.

Is this a bug/feature, or am I missing something - on both counts!

- clicking on a canvas doesn’t raise an event
- setImageURL() won’t load URLs programmatically

The setImageURL problem is demonstrated in [Code.org - App Lab](https://studio.code.org/projects/applab/tqMRPmW7jcWw3v9nW-dcL_QyKjA8mBgAL7FcHvo93y0)

---

<div class="post-metadata">

**Author:** ![johngouk](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/johngouk/32/6696_2.png) [@johngouk](https://forum.code.org/u/johngouk)\
**Post date:** [April 20, 2021, 9:55am UTC](https://forum.code.org/t/setimageurl-vs-drawimageurl/34609/2 "2021-04-20T09:55:22Z")

</div>

> [@johngouk](#):
>
> [https://i.imgur.com/ooaayWf.png](https://i.imgur.com/ooaayWf.png)

OK. I think I understand this.

1. I should be using an Image for the image (really!) - then click events work, and it loads any image.

2. setImageUrl() probably only works for Image widgets, others (screens, buttons) maybe won’t load programmatically??

---

<div class="post-metadata">

**Author:** ![terence.stone25](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/terence.stone25/32/5124_2.png) [@terence.stone25](https://forum.code.org/u/terence.stone25)\
**Post date:** [April 21, 2021, 4:06am UTC](https://forum.code.org/t/setimageurl-vs-drawimageurl/34609/3 "2021-04-21T04:06:38Z")

</div>

@johngouk,  
Here is a link to App Lab Docs: [App Lab Docs](https://studio.code.org/docs/applab/)  
drawImageURL & setImageURL don’t allow you to link to outside data.  
However, check the open ( ) block feature [here](https://studio.code.org/projects/applab/pqdXRVMfu8QWW3-L1DO9FIh2RFQqWEG9O9qmQeRynyY/view).  
Please let us know if you need further assistance.

---

<div class="post-metadata">

**Author:** ![johngouk](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/johngouk/32/6696_2.png) [@johngouk](https://forum.code.org/u/johngouk)\
**Post date:** [April 21, 2021, 7:46am UTC](https://forum.code.org/t/setimageurl-vs-drawimageurl/34609/4 "2021-04-21T07:46:42Z")

</div>

Thanks for that. Reading the Image documentation, it says " **1. Copy the URL of an image on the web.**" as an option for populating Images. And that works, for Image and Canvas both statically configured and programmatically. The images for other widgets (buttons, screens…) can only be statically configured - the docs for setImageURL (bit of a clue in the name!) say “Sets the URL for the specified image element id.”

As far as I can see, it’s only the startWebRequest that’s limited to a pre-configured set of URLs. For images and open(), you can point to anything.

---

<div class="post-metadata">

**Author:** ![jdonwells](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdonwells/32/7900_2.png) [@jdonwells](https://forum.code.org/u/jdonwells)\
**Post date:** [April 21, 2021, 11:47am UTC](https://forum.code.org/t/setimageurl-vs-drawimageurl/34609/5 "2021-04-21T11:47:51Z")

</div>

You can change a button’s image with `setProperty("button1", "image", "https://code.org/images/logo.png");` That also works for screens. It does not work for a canvas.

You can see what elements can have an image by using the drop down in block mode using the `setProperty` function _after selecting an element id_. Prior to selecting an element id the drop down contains properties your element doesn’t have.

`startWebRequest()` doesn’t work for all of the listed sites. The white listed sites often change interface and App Lab isn’t able to keep up with changes. So no help there.

Terence is correct, `open()` is your best option for what you want. App Lab tries to keep inappropriate apps to a minimum.

Another thing to consider is creating a database of the information you want. You can scrap the website into a CSV file and then load it all.
