How to Display Remote Image from Url & Download Image in Browser Using Javascript

Welcome folks today in this blog post we will be displaying remote image from url and download it inside the browser as an attachment in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<html>
<body>
<form>
    <input type="text" id="imagename" value="" />
    <input type="button" id="btn" value="GO" />
</form>
    <script type="text/javascript">
        document.getElementById('btn').onclick = function() {
            var val = document.getElementById('imagename').value,
                src = 'http://webpage.com/images/' + val +'.png',
                img = document.createElement('img');

            img.src = src;
            document.body.appendChild(img);
        }
    </script>
</body>
</html>

<html>

<body>

<form>

</form>

document.getElementById('btn').onclick = function() {

var val = document.getElementById('imagename').value,

src = 'http://webpage.com/images/' + val +'.png',

img = document.createElement('img');

img.src = src;

document.body.appendChild(img);

}

</script>

</body>

</html>

As you can see we have the simple input field where we allow the user to enter the url of the image and then we have the button to show the remote image inside the browser