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

回答

相關問題