使用自定义标头通过Ajax加载图像

Question

3

什么是使用Ajax加载图像的正确方法？

由于我必须传递一些特定的HTTP标头到GET请求中，因此我无法使用通常的标签。出于这个原因，我在使用Ajax方面有些受限制。我必须传递凭据到请求中。如果没有凭证，将无法获取图像文件。

我想知道是否有一种方法可以通过Ajax请求将数据加载到img标签中，并仍然将src属性作为图像的真实URL。我对使用base64数据URL加载图像不太感兴趣。

- Loïc Faure-Lacroix

这里有一个Jquery的解决方案（https://dev59.com/fG855IYBdhLWcg3wiU71#12714338）。由于概念相同，因此可以相对简单地将其适应于vanilla js。 - Liam

@Liam 谢谢，我猜缓存解决方法可能会起作用，但是由于头文件不同，这并不确定。虽然如果我的唯一选择是以base64加载，那么我无能为力 :(. 只是在页面上有大量的base64 url可能会变得很重。 - Loïc Faure-Lacroix

有人认为，一个大的HTTP文件比许多小文件更好（显然这其中有很多变量）。浏览器一次只能支持有限数量的HTTP通道，因此通常最好使用base64编码，在较少的HTTP请求中使用较大的文件可能比使用许多HTTP请求和较小的文件更快（随着文件变得越来越大，优势会下降）。 - Liam

只是出于兴趣，你为什么需要传递特定的头部信息？安全性吗？这相当不寻常。 - Liam

1

@Liam 是的，我必须传递一些凭据才能访问 CouchDB 服务器上的图像。 - Loïc Faure-Lacroix

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ray Perea · Accepted Answer

简短回答：你不能。

唯一的方法是通过ajax将图像以base64数据url的形式响应，或者你需要将其转换为base64数据url并将其作为src属性的值放入标签中。只有这样才能在保留特定http头的同时将该图像放入标签中。

一旦更改了标签的src属性，浏览器将从服务器请求该图像，并且不会传递任何特定的头文件。

如果要显示该图像，则需要使用标签（其中包含我提到的限制），或者可以将其作为任何元素的css背景，但同样存在限制。一旦设置了url，浏览器将加载图像而不传递任何自定义头文件。