Get src image without uploading image?

Question

I have an html fragment returned via ajax. This snippet is an <img> .

 <img src="image.jpg" /> 

I need to extract the value of the src attribute without first loading the image. The reason for this is the src attribute, which contains a partial path that I need to manipulate in the application to load the image correctly.

I have the following code currently retrieving the src attribute:

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

However, this leads to an image loading, which leads to 404. I would like to avoid this unnecessary request.

How to extract the value of the src attribute without causing the browser to load the image?

Answer 1

You can simply delete the attribute after accessing it.

This will not load an invalid image, as you can confirm in your 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> 

Remove removeAttr() and it will try to load the image.

Answer 2

It is probably best to display a data tag on the image. Then you can manipulate this with jQuery and then use it to write the final path of the image.

So, you would do something similar in your HTML:

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

Then in your 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: Sorry, I just re-read the bit where it appeared through AJAX. In this case, you can probably use the data callback of your ajax request to remove src from the image.

Answer 3

I solved this by changing the src attribute name before loading in jquery.

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

This allows me to extract the value without causing the browser to try to load the images.

Answer 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); }); 

Answer 5

If you only have a string, for example <img src="image.jpg" /> , why aren't you using a regex?

Something like: /[\"\'][a-z0-9A-Z\.]*/ . PS: I have a lot of regular expression skills, so you can manipulate it accordingly.

Answer 6

Using

 var string = '<img src="image.png">'; var matches = string.match(/src\=("|')(.*?)\1/); console.log(matches[2]);