Question

我需要在获取图片时设置一些标题。 img src属性不允许这样做，因此我使用XHR请求来获取图像。但是，当我在请求完成后在src标记上设置img属性时，看起来似乎再次触发了请求。有没有办法缓存图像而不是触发第二个请求？

示例代码：

$(document).ready(function() {
    var url = 'https://i.imgur.com/bTaDhpy.jpg'
    var file = $.get(url);
    file.then(function(data) {
        $('#foo').attr('src', url);
    });
});

JS小提琴：https://jsfiddle.net/mehulkar/o4Lcs5Lo/

注意：关于如何在xhr请求中设置相应的标头，我的问题是不。我的问题是如何不从src属性的设置触发另一个GET，并使用XHR的响应来显示图像。

Answer 1

使用$.ajax：

var myImg = $('#foo'),
    mySrc = 'https://i.imgur.com/bTaDhpy.jpg';

$.ajax({
    url: mySrc,
    type: "GET",
    headers: {
        "X-TOKEN": 'xxxxx'
    }
}).done(function() {
    myImg.attr('src', mySrc);   // set the image source
}).fail(function() {
    myImg.hide();    // or something other
});

Answer 2

由于声望点，我不能在此发表评论，但这是我在此发现的内容。我有一个本地html页面，我通过file：///执行我可以使用$ .get将svg文件动态地拉入变量。调试器将其显示为标准html节点<svg。（我使用Firefox Developer，但在Firebug中我将svg文件视为节点。）。

所以此时我有一个空<img我要设置为我的svg文件我不知道如何将src属性设置为实际文档本身。我想我可以编码到base64 ..您可以使用调试器本身进行设置。我无法让它可靠地工作。另一种途径（对我来说，因为我使用svg）是克隆对象然后为节点写入节点。如果您不使用svg，或许有一些类似的黑客你可以用帆布进行？将图像加载为精灵，然后读取颜色并设置像素？

如何使用ajax设置图像的src？

2 个答案: