在不加载图像的情况下获取图像src？答案

【问题标题】：Get image src without loading the image?在不加载图像的情况下获取图像src？
【发布时间】：2015-09-17 18:05:49
【问题描述】：

我有一个通过 ajax 返回的 html sn-p。 sn-p 是一个<img> 标签。

<img src="image.jpg" />

我需要在不加载图像的情况下提取src 属性的值。原因是src 属性包含我需要在我的应用程序中操作以正确加载图像的部分路径。

我目前有以下代码提取src 属性：

var src = $(value).attr('src');

但是，这会导致图像加载，导致 404。我想避免这个不必要的请求。

如何在不导致浏览器加载图像的情况下提取src 属性的值？

【问题讨论】：

如果你不想加载图片，为什么还要制作一个img元素呢？只需在脚本中创建一个带有值的字符串。
让你的服务器返回<img data-src="image.jpg" alt=""/>。然后，使用 jQuery，获取 data-src，对其进行操作，然后将其作为 src 放回去。
我无法控制服务器端 - 我只是在 ajax 请求中获得一个任意的 img 标签 sn-p。
如果你显示你的 ajax 函数。在将其输出到 html 之前，您应该在 ajax 的 success 或 done 部分对其进行操作
如果您不想加载图像，则需要将 AJAX 调用的返回解析为字符串并使用正则表达式或其他方法提取src。

标签： javascript jquery html image

【解决方案1】：

您最好的选择可能是在图像上输出数据标签。然后，您可以使用 jQuery 对其进行操作，然后使用它来编写最终的图像路径。

所以你会在你的 HTML 中做这样的事情：

<img data-img-src="abc.jpg" class="my-image" />

然后在你的 jQuery 中：

var path = $('.my-image').data('img-src');
console.log(path); // Do something here, then write the new path with:
$('.my-image).attr('src', new_path);

编辑：抱歉，我刚刚重新阅读了它通过 AJAX 提供的内容。在这种情况下，您可能可以使用 ajax 请求的数据回调从图像中去除 src。

【讨论】：

这是我的第一个想法，但我无法控制服务器来控制属性名称是什么。
我想我可以在将属性名称加载到 jquery 之前对字符串进行替换...

【解决方案2】：

我通过在将 src 属性加载到 jquery 之前更改它的名称来解决这个问题。

 value = value.replace('src', 'data-src');
 var src = $(value).attr('data-src');

这样做可以让我在不导致浏览器尝试加载图像的情况下提取值。

【讨论】：

如果您能够在其上使用.attr()，如果图像至少没有开始加载，我会感到惊讶。这意味着它已经创建了一个Image 对象并在其上设置了一个.src 属性。
对，这就是导致初始加载尝试的原因。通过替换属性名称，元素不再具有 src 属性，因此不再尝试加载图像。

【解决方案3】：

如果你只有字符串，比如<img src="image.jpg" />，为什么不使用正则表达式？

类似：/[\"\'][a-z0-9A-Z\.]*/。 PS：我的正则表达式能力很差，所以你可以相应地操作它。

【讨论】：

【解决方案4】：

$.ajax('someURL.html', function(data){
    var html = data.replace(/\ssrc/g, ' data-src'),
        img  = $(html),
        src = 'some/path/' + img.data('src');
    img.attr('src', src);
    $('#container').append(img);
});

【讨论】：

【解决方案5】：

使用

var string = '<img src="image.png">';

var matches = string.match(/src\=("|')(.*?)\1/);

console.log(matches[2]);

【讨论】：

【解决方案6】：

您可以在访问后简单地删除该属性。

这不会加载无效图像，您可以在控制台中确认：

var s= $('<img src="invalidURL.jpg">'),
    src= s.attr('src');

s.removeAttr('src');
console.log(src);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

删除removeAttr()，它将尝试加载图像。

【讨论】：

有趣。这很有帮助。谢谢！