更新按鈕上的img src按

Question

我已經寫了一個簡單的函數來獲取已認證的用戶的個人資料圖片並將<img>設置爲此。雖然src屬性正在更新，但圖像實際上並未改變。

function getDefault(){ 
    FB.api('/me', function(response) { 
     $('#default').val("http://graph.facebook.com/" + response.id + "/picture"); 
    }); 
    alert($('#default').val()); 
    } 

...

<img id="default" src="getDefault()"/> 
<button onclick="getDefault()">Click to see your profile picture!</button> 

Answer 1

的屬性不是 「價值」。這是「src」。所以...它應該是這樣的：

$('#getDefault').click(function(){ 
    FB.api('/me', function(response) { 
     $('#default').attr('src', 'http://graph.facebook.com/' + response.id + '/picture'); 
     alert($('#default').attr('src')); 
    }); 

}); 

<img id="default" src="getDefault()"/> 
<button id="getDefault">Click to see your profile picture!</button> 

更新？：另外，警報應該在裏面，因爲也許你不會得到以外的任何值...

Answer 2

你爲什麼會設置src到不返回值的函數調用？這會給你一個未定義的.src值。 src需要是一個URL。您可以通過從您的函數返回一個URL或將.src屬性直接設置爲一個URL來實現該目的。此外，圖像沒有.value屬性。

你的HTML改成這樣：

<img id="default"/> 
<button id="getDefault">Click to see your profile picture!</button> 

而且你的JS到這一點：

$('#getDefault').click(function(){ 
    FB.api('/me', function(response) { 
     $("#default").attr('src', 'http://graph.facebook.com/' + response.id + '/picture'); 
    }); 
});