web-dev-qa-db-fra.com

Javascript: charger une image à partir de l'url et l'afficher

Je veux commencer par le fait que je suis très novice en JavaScript. J'apprécie votre patience avec moi.

J'essaie de créer un script qui permet à un utilisateur de saisir un nom dans une zone de texte, d'appuyer sur Soumettre et une image s'affiche en fonction de ce nom. 

J'ai réussi à trouver ceci:

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

Ce qui fait presque exactement ce dont j'ai besoin - charge une image autour des entrées d'un utilisateur. Mais ce que je veux, ce n'est pas que l'image s'ouvre dans une nouvelle fenêtre ou soit téléchargée sur mon ordinateur - je souhaite qu'elle s'affiche sur la page lorsque vous cliquez sur une image du type l'exemple ici .

Je suis sûr que mon inexpérience avec Javascript est la principale cause de mon incapacité à comprendre cela. Le script ci-dessus est tout ce que je peux obtenir sans foirer. Toute aide est appréciée.

javascriptimageload
11
user2579872

Lorsque le bouton est cliqué, obtenez la valeur de l'entrée et utilisez-la pour créer un élément d'image qui est ajouté au corps (ou ailleurs):

<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

le même dans jQuery:

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

Vous devez créer une URL qui repose sur la valeur d’entrée. Le seul problème est que vous utilisez window.location.href. La définition de window.location.href change l'URL de la fenêtre en cours. Ce que vous voulez probablement faire est de changer l'attribut src d'une 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>
1
Alex Wissmann

Il vous manquait juste une balise d'image pour changer l'attribut "src" de:

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

Êtes-vous après quelque chose comme ça:

 <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>
0
Jeremy J Starcher

Ajouter un div avec l'ID imgDiv et faire votre script

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

J'ai essayé de rester aussi proche de votre original que de ne pas vous submerger avec jQuery et autres

0
mplungjan