获取图片的src而不加载图片？

Question

我通过ajax获取到一个html片段。这个片段是一个<img>标签。

<img src="image.jpg" />

我需要在不加载图像的情况下提取src属性的值。这是因为src属性包含了一个部分路径，我需要在我的应用程序中对其进行操作以正确加载图像。

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

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

然而，这会导致图片被加载，进而出现404错误。我希望避免这种不必要的请求。

如何提取src属性的值而不使浏览器加载图片？

- Kyle Trauberman

---

如果您不想加载图像，为什么还要创建img元素？只需在脚本中创建一个带有该值的字符串即可。 - user3117575

让您的服务器返回<img data-src="image.jpg" alt=""/>。然后，使用jQuery获取data-src，对其进行操作，并将其作为src放回。 - blex

我无法控制服务器端 - 我只是作为 ajax 请求的一部分获取任意 img 标签片段。 - Kyle Trauberman

如果你展示你的ajax函数，你应该在将其输出到html之前，在ajax的success或done部分中对其进行操作。 - Craicerjack

如果您不想加载图像，则需要将 AJAX 调用的返回解析为字符串，并使用正则表达式或其他方法提取 src。 - Alex W

Answer 1

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

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

这样做可以让我提取值而不会导致浏览器尝试加载图像。

- Kyle Trauberman

---

如果您能在其上使用.attr()，那么如果图像没有开始加载，我会感到惊讶。这意味着它已经创建了一个Image对象，并且已经设置了.src属性。 - Alex W

没错，这就是导致初始加载尝试的原因。通过替换属性名称，该元素不再具有src属性，因此不再尝试加载图像。 - Kyle Trauberman

Answer 2

你最好的选择可能是在图像上输出一个数据标签。然后您可以使用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。

- Joe Czucha

---

那是我的第一反应，但我无法控制服务器来控制属性名称。 - Kyle Trauberman

我想在将其加载到jquery之前，可以对属性名称的字符串进行替换... - Kyle Trauberman

Answer 3

$.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);
});

- blex

Answer 4

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

可以使用类似这样的正则表达式：/[\"\'][a-z0-9A-Z\.]*/。顺便提一下，我的正则表达式技能很差，所以你可以根据需要进行调整。

- Varun

Answer 5

使用

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

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

console.log(matches[2]);

- user2594803

Answer 6

你可以在访问后简单地移除该属性。

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

删除removeAttr()，它会尝试加载图片。

- Rick Hitchcock

---

有趣。这很有帮助。谢谢！ - Kyle Trauberman