Javascript：从网址加载图片并显示

我想以这样一个事实作为前言，我对JavaScript非常陌生。我感谢你对我的耐心。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>

几乎不正是我需要的-loads围绕什么是用户输入的图像。但我想要的不是图像在新窗口中打开，或下载到我的电脑 - 我希望它在点击时显示在页面上，像the example here这样的图像。

我敢肯定，我对Javascript的经验不足是我无法弄清楚的主要原因。上面的脚本尽我所能得到，而不会把事情搞砸。任何帮助表示赞赏。

来源

2013-07-13 user2579872

是否使用普通的JavaScript库？ –

window.location.href告诉它在新窗口中打开。我建议你使用jQuery就像你看到的例子。 – dcodesmith

当点击该按钮时，获取输入的值，并用它来创建被附加到主体的图像元素（或任何其他地方）：

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

来源

2013-07-13 20:43:36 adeneo

这正是我所追求的。谢谢。现在我只需要弄清楚你是如何做到的。我明白你说了什么，我只需要在设定之前多打几遍。 – user2579872

我只是给这个按钮一个id，并且附加了一个onclick处理函数，并且在该处理函数中，当单击该按钮时，它获取文本输入的值，创建URL（如您在变量中所见），然后创建一个图像元素，将图像的src属性设置为URL，并将该图像附加到主体。但它并不删除图像，但应该很容易弄清楚，或者只是提出另一个问题。顺带一提，欢迎您。 – adeneo

你这样的事情后：

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

来源

2013-07-13 20:45:20

添加一个div ID imgDiv，使你的脚本

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

我试图保持接近你原来的TP不使用jQuery压倒你，这样

来源

2013-07-13 20:46:02 mplungjan

你有正确的观念产生基于输入值的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>

来源

2013-07-13 20:46:17

没有src属性的图像不是有效的HTML。 http://w3c.github.io/html/single-page.html#the-img-element然而，至少在Firefox中它至少能够正常工作。 –

你只是缺少一个图像标签更改的“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>

来源

2013-07-13 20:51:41 Mike

-1

首先，我强烈建议使用一个库或框架做你的Javascript。但只是为了非常简单的事情，或为了学习的乐趣，这是可以的。（你可以使用jQuery，下划线，knockoutjs，角）

其次，它不建议直接绑定到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/

来源

2013-07-13 21:02:47 Fernando

Javascript：从网址加载图片并显示

回答

相关问题