web-dev-qa-db-ja.com

Javascript：URLから画像を読み込んで表示する

私は、JavaScriptに非常に新しいという事実を前置きしたいと思います。私の忍耐に感謝します。

ユーザーがテキスト領域に名前を入力し、送信を押すと、その名前に基づいて画像が表示されるスクリプトを作成しようとしています。

私はこれを思いついた：

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

これは私が必要とするものをほぼ正確に実行します-ユーザーが入力したものの周りに画像をロードします。しかし、私が望むのは、画像を新しいウィンドウで開いたり、コンピューターにダウンロードしたりすることではありません- ここの例 のような画像としてクリックしたときにページに表示したいのです。

私がJavascriptを経験していないことが、これを理解できない主な原因であると確信しています。上記のスクリプトは、物事を台無しにせずに取得できる限りです。どんな助けも大歓迎です。

javascriptimageload
13
user2579872

ボタンがクリックされたら、入力の値を取得し、それを使用して、ボディ（またはその他の場所）に追加される画像要素を作成します。

<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 [〜＃〜]

jQueryでも同じ：

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

入力値に基づいてURLを生成するという考えを正さなければなりません。唯一の問題は、window.location.hrefを使用していることです。 window.location.hrefを設定すると、現在のウィンドウのURLが変更されます。おそらくやりたいことは、画像のsrc属性を変更することです。

<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

次の「src」属性を変更するための画像タグが欠落していました。

    <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

あなたはこのようなことをした後ですか：

 <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

ID imgDivのdivを追加して、スクリプトを作成します

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

TpがjQueryなどであなたを圧倒しないように、オリジナルにできるだけ近づけようとしました

0
mplungjan