我在S3上存储了图像,其中描述存储在元数据中,跟随their recommendation for storing metadata
如何在浏览器中直接显示图像时检索响应标头?我试过在img元素上查看onload事件但找不到头文件。我也尝试过XMLHttpRequest,它在响应中获取了标题,但我不能将responseText用作img src。
答案 0 :(得分:5)
最终我找到this fiddle并通过XMLHttpRequest获取图像,然后将标题中的desc设置为自定义属性中的图像:
function(image_path, img){
// Use a native XHR so we can use custom responseType
var xhr = new XMLHttpRequest();
xhr.open("GET", image_path, true);
// Ask for the result as an ArrayBuffer.
xhr.responseType = "arraybuffer";
xhr.onload = function( e ) {
// Obtain a blob: URL for the image data to draw it
var arrayBufferView = new Uint8Array( this.response );
var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
var imageUrl = URL.createObjectURL( blob );
img.src = imageUrl;
// Get the description from S3 metadata
var desc = this.getResponseHeader('x-amz-meta-description');
img.setAttribute('data-description', desc);
};
xhr.send();
}
答案 1 :(得分:0)
如果您需要在图像加载之前获取响应标头或没有图像加载,您可以使用头部查询。执行此查询时,您将只收到标头,如果您只需要没有文件的自定义数据,则效率更高。
$.ajax({url:imageUrl,type:"HEAD"}).always(function(data,content,xhr){
var desc = xhr.getResponseHeader('x-amz-meta-description');
console.log(desc)
});