從Rest API獲取圖像。 JQuery問題

兩個相關的問題。從Rest API獲取圖像。 JQuery問題

(this is my jquery.js file) 

$.ajax 
    ({ 
    type: "GET", 
    url: "url", 
    dataType: 'image/png', 
    async: false, 

    beforeSend: function (xhr) { 
    xhr.withCredentials = true; 
    xhr.setRequestHeader("Authorization", "Bearer xxxx"); 
    }, 

    success: function (data) { 

    document.getElementById("myImage").src = data; // (will be in next question) 
    console.log(data); 
    } 

    });

當我JSON數據，就會將數據放到通過的console.log鉻控制檯（開發工具）。然而，用PNG我沒有看到任何數據。這讓我擔心，因爲在圖片中的請求響應我看到了二進制數據

�Ս-��tKn�v���6�k�˟>��������7�&=���+���?J�k�����y����L���m�(ψ/

，但我需要確保這是在數據變量，因爲的.src =數據線。

這導致我的下一個問題....如果圖像二進制數據是在「數據」變量，不應該它顯示在我的HTML？

<html> 
    <head> 
     <script src="//code.jquery.com/jquery-2.0.0.min.js"></script> 
     <script src="jquery.js"></script> 
    </head> 
    <body> 
     <img id="myImage" src="" /> 
    </body> 
</html>

謝謝！

來源

2014-06-27 k9b

爲什麼你需要ajax電話？剛剛成立

document.getElementById("myImage").src = url;

即使你通過Ajax調用獲得圖像的內容，讓周圍的所有瀏覽器的問題，編碼問題等等，你不能只顯示圖像，監守「源」的屬性一個img帶一個URL而不是數據流。

在那旁邊，你的代碼看起來很好，如果我去JQuery.com並在控制檯中運行這個（火狐 - 最新的），我會得到的數據流：

$.ajax 
    ({ 
    type: "GET", 
    url: "http://jquery.com/jquery-wp-content/themes/jquery.com/i/feature-sprites.png", 
    dataType: 'image/png', 
    async: false, 

    success: function (data) { 
     console.log(data); 
    } 

    });

您可能希望確保您的身份驗證不失敗，並且由於您可能在與API不同的域上運行腳本，因此應確保API允許CORS（跨源資源共享），這意味着您可以從不同的域調用它。

來源

2014-06-27 23:49:16 hnafar

我的印象是我需要ajax調用，因爲它需要授權的鏈接（不記名令牌） – k9b

除非您可以將流保存到某處，然後將的URL設置爲該位置，否則您將不會能夠對數據做很多事情。由於這是一個獲取請求，因此您可以選擇通過URL參數以其他方式傳遞身份驗證令牌。你的其他選擇是讓這個請求服務器端，在這種情況下，你將src屬性設置爲您的服務器上的終點，然後在那裏您使用適當的授權標頭向目標api發出請求，然後流回應給你的客戶端 - 也就是說，如果你運行服務器端代碼。 – hnafar

感謝評論hnafar，這是有道理的。我關心的是來自請求的二進制數據響應不被存儲在「數據」變量中，對嗎？或者它實際上是存儲在那裏，它只是沒有打印與console.log – k9b

從Rest API獲取圖像。 JQuery問題

回答

相關問題