4

获取图像时我需要设置一些标题。该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 的响应来显示图像。

4

2 回答 2

3

为此使用$.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
});
于 2015-03-30T20:16:58.967 回答
0

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

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

于 2017-02-03T08:38:10.357 回答