Javascript Render an Image from a Link

Question

I'm working on something and my boss told me that our client needs a javascript that when put on their website in will generate or render the image from a certain link.

Example Link. https://i.stack.imgur.com/WdB4A.png

Is that possible? I'm thinking that it is impossible because you will never know the location which the image should be rendered but my boss told me the client will put it in an iframe. Then the iframe loads the script and the script will render the image.

score 2 · Accepted Answer · edited May 23 '17 at 11:43

It's perfectly possible :)

function show_image(src, width, height, alt) {
    var img = document.createElement("img");
    img.src = src;
    img.width = width;
    img.height = height;
    img.alt = alt;

    // This next line will just add it to the <body> tag
    // but you can adapt to make it append to the element you want.
    document.body.appendChild(img);
}

And you can use it like this for example :

<button onclick="show_image('http://i.imgur.com/YmmSEz9.png',  300,   250, 'Big Red Kangaroo');">Display image</button>

(See How to display image with javascript? for the origin of the code)

See this fiddle to see the result : https://jsfiddle.net/gd9nfo32/4/

Javascript Render an Image from a Link

1 Answers1