如何在HTML頁面中使用HTTP標頭顯示圖像？

我有一個按鈕的基本HTML頁面。點擊該按鈕後，它應該在GET請求上調用一個HTTP URL（帶有Accept頭）。如何在HTML頁面中使用HTTP標頭顯示圖像？

HTTP URL的輸出是圖像或音頻或視頻（按照請求標頭）。我應該如何編寫JavaScript或Ajax調用

<html> 

<form> 

<input type="submit" id='img_display' onClick=imgDisp()> 
<div id='display'></div> 

</form> 

</html>

的Ajax代碼 -

$("#img_display").on("click", function imgDisp() { 
$.ajax(   
    { 
     type: 'GET',     
     url: 'http_url', 
     dataType: 'json', 
     beforeSend : function(xhr) 
     { 
      xhr.setRequestHeader('Accept', 'image/png'); 
     },    
     success: function(data){ 
       alert("successfully")            
     }, 
     error: function(e){  
       alert("error post" + e); 
     }    
    } 
    );

}）;

來源

2017-03-01 John Seen

旁註：同時有一個JavaScript點擊事件和onClick會導致它觸發兩次，或控制檯錯誤，該功能imgDisp未定義 –

希望這會幫助你！

$(document).ready(function(){ 
 
    $("#Submit").click(function(){ 
 
     var image_url = $(".imageurl").val(); 
 
     $(".ImageContainer").html("<img src='"+image_url+"' width='200'>"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="imageurl"> 
 
<button id="Submit">Submit</button> 
 
<div class="ImageContainer"> 
 
    <!--Image Display -->  
 
</div>

來源

2017-03-01 16:47:15

雖然不適用於視頻。 –

好的。讓我也添加視頻選項..！ –

如何/在哪裏可以在此代碼中添加HTTP標頭？ –

爲了使返回任一的圖像，音頻或視頻內容的Ajax請求，並迫使接收Javascript來猜測一個潛在的巨大數據的斑點的內容類型，差設計。

根據音頻和視頻內容的類型，根本不可能按照這種方式做事。

這是多更好地使一個Ajax請求的是，比如說，返回與內容類型和URL JSON對象：

{ "type": "image", 
    "url": "http://example.com/images/5/example.jpg" }

，或者對於視頻：

{ "type": "video", 
    "url": "http://example.com/videos/5/example.mp4" }

你得到漂移。

然後，您可以適當地處理內容，例如創建img元素並將src屬性設置爲URL，或者使用視頻URL調用視頻或音頻播放器。

這樣，您還可以發送與呈現最終結果相關的其他元數據 - 例如，圖像尺寸和替代文字。

來源

2017-03-01 16:51:14

回答

相關問題