Javascript：从 url 加载图像并显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17634019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: Load an Image from url and display
提问by user2579872
I want to preface this with the fact that I am very very new to JavaScript. I appreciate your patience with me.
我想以我对 JavaScript 非常陌生的事实作为序言。我感谢你对我的耐心。
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.
我确信我对 Javascript 的缺乏经验是我无法弄清楚这一点的主要原因。上面的脚本是我在不搞砸的情况下所能得到的。任何帮助表示赞赏。
回答by adeneo
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>
the same in jQuery:
在 jQuery 中相同：
$('#btn').on('click', function() {
var img = $('<img />', {src : 'http://webpage.com/images/' + $('#imagename').val() +'.png'});
img.appendTo('body');
});
回答by Jeremy J Starcher
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>
回答by Alex Wissmann
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.
您必须正确地根据输入值生成 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>
回答by Mike
You were just missing an image tag to change the "src" attribute of:
您只是缺少一个图像标签来更改“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>
回答by mplungjan
Add a div with ID imgDiv and make your script
添加一个 ID 为 imgDiv 的 div 并制作你的脚本
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
我试图尽可能接近你的原始版本，因为 tp 不会用 jQuery 之类的东西压倒你
回答by Fernando
First, I strongly suggest to use a Library or Framework to do your Javascript. But just for something very very simple, or for the fun to learn, it is ok. (you can use jquery, underscore, knockoutjs, angular)
首先，我强烈建议使用库或框架来执行您的 Javascript。但只是为了一些非常非常简单的事情，或者为了学习的乐趣，这是可以的。（你可以使用 jquery、下划线、knockoutjs、angular）
Second, it is not advised to bind directly to onclick, my first suggestion goes in that way too.
其次，不建议直接绑定到 onclick，我的第一个建议也是这样。
That's said What you need is to modify the src of a img in your page.
也就是说，您需要修改页面中 img 的 src。
In the place where you want your image displayed, you should insert a img tag like this:
在您希望显示图像的位置，您应该插入一个 img 标签，如下所示：
Next, you need to modify the onclick to update the src attribute. The easiest way I can think of is like his
接下来，您需要修改 onclick 以更新 src 属性。我能想到的最简单的方法就是像他
onclick=""document.getElementById('image-placeholder').src = 'http://webpage.com/images/' + document.getElementById('imagename').value + '.png"
Then again, it is not the best way to do it, but it is a start. I recommend you to try jQuery and see how can you accomplish the same whitout using onclick (tip... check the section on jquery about events)
再说一次，这不是最好的方法，但它是一个开始。我建议您尝试 jQuery，看看如何使用 onclick 完成相同的 whitout（提示...查看有关事件的 jquery 部分）
I did a simple fiddle as a example of your poblem using some google logos... type 4 o 3 in the box and you'll two images of different size. (sorry.. I have no time to search for better images as example)
我做了一个简单的小提琴作为使用一些谷歌徽标的问题的示例...在框中键入 4 o 3，您将获得两个不同大小的图像。（对不起..我没有时间搜索更好的图像作为例子）
