Javascript: Load an Image from url and display

javascript image load

167,829

Solution 1

When the button is clicked, get the value of the input and use it to create an image element which is appended to the body (or anywhere else) :

<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>

FIDDLE

the same in jQuery:

$('#btn').on('click', function() {
    var img = $('<img />', {src : 'http://webpage.com/images/' + $('#imagename').val() +'.png'});
    img.appendTo('body');
});

Solution 2

Are you after something like this:

 <html>
 <head>
    <title>Z Test</title>
 </head>
 <body>

<div id="img_home"></div>

<button onclick="addimage()" type="button">Add an image</button>

<script>
function addimage() {
    var img = new Image();
    img.src = "https://www.google.com/images/srpr/logo4w.png"
    img_home.appendChild(img);
}
</script>
</body>

Solution 3

Add a div with ID imgDiv and make your script

 document.getElementById('imgDiv').innerHTML='<img src=\'http://webpage.com/images/'+document.getElementById('imagename').value +'.png\'>'

I tried to stay as close to your original as tp not overwhelm you with jQuery and such

Solution 4

You were just missing an image tag to change the "src" attribute of:

    <html>
<body>
<form>
<input type="text" value="" id="imagename">
<input type="button" onclick="document.getElementById('img1').src =          'http://webpage.com/images/' + document.getElementById('imagename').value +'.png'"     value="GO">
<br/>
<img id="img1" src="defaultimage.png" />
</form>
</body>
</html>

Solution 5

You have to right idea generating the url based off of the input value. The only issue is you are using window.location.href. Setting window.location.href changes the url of the current window. What you probably want to do is change the src attribute of an image.

<html>
<body>
<form>
  <input type="text" value="" id="imagename">
  <input type="button" onclick="var image = document.getElementById('the-image'); image.src='http://webpage.com/images/'+document.getElementById('imagename').value +'.png'" value="GO">
</form>
<img id="the-image">
</body>
</html>

View more solutions

167,829

user2579872

Updated on July 09, 2022

Comments

user2579872 almost 2 years
I want to preface this with the fact that I am very very new to JavaScript. I appreciate your patience with me.

I'm trying to create a script that allows a user to input a name into a text-area, press submit and an image is displayed based on that name.

I managed to come up with this:
```
<html>
<body>
<form>
<input type="text" value="" id="imagename">
<input type="button" onclick="window.location.href='http://webpage.com/images/'+document.getElementById('imagename').value +'.png'" value="GO">
</form>
</body>
</html>
```
Which almost does exactly what I need -loads an image around what a user inputs. But what I want is not for the image to open in a new window, or download to my computer - I want it to display on the page when clicked as an image like the example here.

I'm sure that my inexperience with Javascript is the main cause of my being unable to figure this out. The script above is as far as I can get without screwing things up. Any help is appreciated.
- Brett Weber almost 11 years
  
  Are you using a library of plain javascript?
- dcodesmith almost 11 years
  
  window.location.href is telling it to open in a new window. I suggest you use jQuery just like the example you saw.
- João Pimentel Ferreira almost 4 years
  
  Why not simply stackoverflow.com/a/63003728/1243247 ?
user2579872 almost 11 years

This is exactly what I was after. Thank you. Now I just have to figure out how you did it. I understand what you've said, I just have to wrap my mind around a few more times before it sets.
adeneo almost 11 years

I just gave the button an id, and attached an onclick handler, and in that handler, when the button is clicked, it gets the value of the text input, creates the URL, as you can see in the variables, and then creates an image element, sets the src property of the image to the URL, and appends that image to the body. It does however not remove the images, but that should be easy to figure out, or just ask another question. You're welcome BTW.
Uwe Geuder over 6 years

An image without src attribute is not valid HTML. w3c.github.io/html/single-page.html#the-img-element However, it works as desired at least in Firefox.
João Pimentel Ferreira almost 4 years

Why not using jquery? It is so much more simple: stackoverflow.com/a/63003728/1243247