How do I load a remote image into Hype?


(BIlly) #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


(Olof Pock) #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">


(BIlly) #4

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


(Hans-Gerd Claßen) #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


(BIlly) #7

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


(BIlly) #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!