How do I load a remote image into Hype?

Getting Started
1

As title. I need to be able to have an image loaded from a remote location. At the moment I can only choose an image from the drive. I’ve tried adding style code to the rectangle to no avail.

Help appreciated.

Edit: I got it working by adding to the rectangle shapes textbox:

<style>
.thumb1 { background-image:url(http://i.vimeocdn.com/video/477636459_295x166.webp) !important;}
</style>

Is this the only way?

Thanks

2

You can do it with a little bit of javascript. Write a js function like this and give your rectangle the id picture. Trigger the function from where you like.

document.getElementById("picture").innerHTML='<img src="http://www.dw.de/image/0,,17667249_303,00.jpg" width="320px" "align="left" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" name="">';
3

You can also use a simple image tag within the inner HTML of an element:

<img src="http://site.com/image.jpg" width="100" height="100">

2 Likes
4

Daniel, webp image format doesn’t seem to work with the img tag :pensive:

5

Billy, guess you missed the quotes for the url …

6

Not very good support in general for the Webp image format:

http://caniuse.com/#search=webp

7

Oops, was missing a character in the filename. Seems to work now.

8

Looks like I spoke too soon. webp doesnt work on Firefox and IE, but is fine on Opera and Chrome. You were right Daniel!