Javascript:从url加载图像并显示

Javascript: Load an Image from url and display

本文关键字：图像 显示 加载 url Javascript      更新时间：2023-09-26

我想以我对JavaScript非常陌生这一事实作为开场白。我感谢你对我的耐心。

我正在尝试创建一个脚本，允许用户在文本区域输入一个名称，然后按submit，然后根据该名称显示一个图像。

我设法想出了这个：

<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缺乏经验是我无法理解这一点的主要原因。上面的剧本是我所能做到的，不会把事情搞砸。感谢您的帮助。

单击按钮时，获取输入值并使用它创建一个附加到主体（或其他任何位置）的图像元素：

<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');
});

你在追求这样的东西吗：

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

添加一个ID为imgDiv的div，并使脚本成为

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

我试着尽可能接近你的原始版本，而不是用jQuery和这样的淹没你

您必须正确地根据输入值生成url。唯一的问题是您使用的是window.location.href。设置window.locationhref会更改当前窗口的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>

您只是缺少一个图像标记来更改的"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>

首先，我强烈建议使用库或框架来编写Javascript。但对于一些非常简单的东西，或者为了学习的乐趣，它是可以的。（你可以使用jquery、下划线、knockoutjs、angular）

其次，不建议直接绑定到onclick，我的第一个建议也是这样。

就是这么说的您需要的是修改页面中img的src。

在您想要显示图像的地方，您应该插入一个img标记，如下所示：

接下来，您需要修改onclick来更新src属性。我能想到的最简单的方法就是像他的

onclick=""document.getElementById('image-placeholder').src = 'http://webpage.com/images/' + document.getElementById('imagename').value + '.png"

再说一遍，这不是最好的方法，但这是一个开始。我建议您尝试jQuery，看看如何使用onclick（提示…查看关于事件的jQuery部分）实现相同的精简

我用一些谷歌标志做了一个简单的小提琴作为你的问题的例子。。。在框中键入4或3，您将看到两个不同大小的图像。（对不起，我没有时间搜索更好的图像）

http://jsfiddle.net/HsnSa/

相关文章：