使用JQuery属性和HTML输入更改图像src

我寻找，我发现周围的代码的一点帮助，但我不能让towork，因为我想：

此代码，本质上，假设您在输入插入的网址图片（比如说“http://i.blogs.es/e79516/nuevo-logo-google/650_1200.jpg”），一旦你离开输入，脚本就会自动在下面的图片中显示出来。

问题是，我想只输入存档的名称，不是整个URL，但我不知道如何或在哪里输入所有的URL路由，只剩下动态部分改变，因为我从Js开始。

因此，想象我只想显示已在“// localhost/ROL/images/Avatars/Characters/”中创建和删除的图像“存档名称” .png“，我应该只对输入文件名，甚至没有扩展名？

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Documento sin título</title> 
<script src="js/jquery-2.1.4.js"></script> 
<script src="js/jquery-ui.js"></script> 
<link rel="stylesheet" type="text/css" href="js/jquery-ui.css"> 
</head> 
<body> 
<tr> 
     <td valign="top"> 
      Profile Picture:<br> 
      <span class="small3">(will be reduced to 50x50)</span> 
     </td> 
     <td> 
      <input size="100" id="newProfilePicture" name="profpic" value="/%profpic%/"> 
      <br> 
      <img id="profilePicture" src="/%profimg%/"> 
     </td> 
    </tr> 
</body> 
<script> 
$('#newProfilePicture').blur(function() { 
     var newSrc = $('#newProfilePicture').val(); 
     $('#profilePicture').attr('src',newSrc); 
    }); 
</script> 
</html>

感谢您的关注

来源

2016-06-28 Darkness Seeker

那么''会对你有用吗？ –

.blur(function(){ 
    $('#profilePicture').prop('src',"i.blogs.es/e79516/nuevo-logo-google/"+$('#newProfilePicture').val()+".png"); 
});

作品，但没有必要的值保存到一个变量。您也可能想要使用prop（）而不是attr。（对不起，我错过了你的OP问题，要求加上“.png”）

来源

2016-06-28 16:30:58 gordon

感谢您的快速响应！正如你所说，它工作得非常好，但如果我也想在源代码的末尾添加“.png”，那么我只能输入名称，我应该编辑这样的行： .prop（ 'SRC'， “i.blogs.es/e79516/nuevo-logo-google /” + $（ '＃newProfilePicture'）+ .VAL（））。 “PNG”; 或者如何？ –

将您的输入视为整个URL的块。该块来自jQuery评估输入：'$（'＃newProfilePicture'）。val（）'该块需要完全相同。因此，如果你想添加“.png”，它会追踪jQ块：... $（'＃newProfilePicture'）。val（）+“。png”' – gordon

感谢您的帮助！ Upvoted并标记为解决方案;） –

使用JQuery属性和HTML输入更改图像src

回答

相关问题