Ottieni immagini src senza caricare l'immagine?

Question

Ho uno snippet html restituito tramite ajax. Lo snippet è un tag <img>.

<img src="image.jpg" /> 

Ho bisogno di estrarre il valore dell'attributo src senza caricare l'immagine inizialmente. Il motivo è l'attributo src che contiene un percorso parziale che devo manipolare nella mia app per caricare correttamente l'immagine.

Ho il seguente codice attualmente estrarre l'attributo src:

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

Tuttavia, questo provoca l'immagine da caricare, con un conseguente 404. Vorrei evitare questa richiesta inutile.

Come posso estrarre il valore dell'attributo src senza che il browser carichi l'immagine?

Answer 1

si può semplicemente rimuovere l'attributo dopo l'accesso.

questo non caricare l'immagine non valido, come si può confermare per la console:

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>

Rimuovere removeAttr(), e sarà tentativo di caricare l'immagine.

Answer 2

La soluzione migliore è probabilmente quella di stampare un tag di dati sull'immagine. È quindi possibile manipolarlo usando jQuery e quindi utilizzarlo per scrivere il percorso dell'immagine finale.

Così si farebbe qualcosa di simile nel codice HTML:

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

Poi, nel tuo 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); 

EDIT: Scusate ho appena riletto il pezzo in cui è venuta tramite la tecnologia AJAX . In tal caso, puoi probabilmente utilizzare il callback dei dati della tua richiesta ajax per rimuovere l'src dall'immagine.

Answer 3

Ho risolto questo cambiando il nome dell'attributo src prima di caricarlo in jQuery.

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

Ciò mi consente di estrarre il valore senza che il browser tenti di caricare le immagini.

Answer 4

Se hai appena la stringa, come <img src="image.jpg" /> perché non vai a fare un'espressione regolare?

Qualcosa come: /[\"\'][a-z0-9A-Z\.]*/. PS: le mie abilità regex sono scarse, quindi è possibile modificarle di conseguenza.

Answer 5

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

Answer 6

Usa

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

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

console.log(matches[2]);