How to fetch img srcset url using jquery

Question

I have an image tag with srcset attribute holding a value(url). Now i need to fetch and generate same for src attribute as well.

$('img').attr('srcset')

The above code is not working and returns undefined.

<img srcset="http://s7d2.scene7.com/is/image/Hod/Mobile600x160?$600x160$" alt="">

I need to fetch above srcset value("http://s7d2.scene7.com/is/image/Hod/Mobile600x160?$600x160$") and append the same value for src attribute. Kindly help.

Thanks in advance.

If you just need to do something with the 'srcset' value, the answer already provided are just fine. But if your purpose is to change the image 'src' through javascript, you should consider to apply the HTML Specification here the specification, and here a small explanation that suggest to use 'srcset' in combination with 'sizes' attribute. — Mario Santini
– Mario Santini, Commented Jul 14, 2016 at 7:21

SdSaati · Accepted Answer · 2016-07-14 07:37:09Z

2

use this it works for me ! as XzenTorXz said in above with a little change :

$(document).ready(function(){
  var img = $('img[srcset]');
  img.each(function(){
    this.src = $(this).attr('srcset');
  });
});

edited Jul 14, 2016 at 7:37

answered Jul 14, 2016 at 7:03

SdSaati

9222 gold badges10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andreas Over a year ago

Doesn't work with multiple images (see the OPs comment)

Andreas Over a year ago

No it doesn't. .attr(...) returns the value of the first element in the set of matched elements. With this code every image will have the same src value (namely the srcset from the first image)

vsm Over a year ago

hi @Saeid, I need to update all img tags. Need to get srcset value and update that value to src attribute

SdSaati Over a year ago

@vsm plz check mine too plz this checks only img with attr srcset not all of imgs

fehrlich · Accepted Answer · 2016-07-14 07:11:18Z

1

you need to wait till the dom is loaded: $(document).ready(function(){})

$(document).ready(function(){
  var img = $('.img');
  img.each(function(){
    this.src = this.srcset;
  });
});

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

<img class="img" srcset="http://s7d2.scene7.com/is/image/Hod/Mobile600x160?$600x160$" alt="">
<img class="img" srcset="http://s7d2.scene7.com/is/image/Hod/Mobile600x160?$600x160$" alt="">

you still can change back to $('img') instead of $('.img') but be aware that then every img tag will be progressed.

edited Jul 14, 2016 at 7:11

answered Jul 14, 2016 at 7:00

fehrlich

2,5352 gold badges26 silver badges45 bronze badges

3 Comments

Andreas Over a year ago

A simple this.src = this.srcset would be enough. No need to instantiate two fullblown jQuery objects just for reading and assigning an attribute value :)

vsm Over a year ago

$('img').prop('srcset') returns " "

fehrlich Over a year ago

@vsm if you hit run you will see that the img src is assigned, did you add the document-ready part ?

Gayathri Mohan · Accepted Answer · 2016-07-14 06:55:40Z

HTML

  <img src="http://jonathonleathers.com/images/germany-src.jpg" 
     srcset="http://jonathonleathers.com/images/germany-1x.jpg 1x, 
             http://jonathonleathers.com/images/germany-2x.jpg 2x"
     alt="Germany"
     id="photo-full">

<div class="thumbs">
  <img src="http://jonathonleathers.com/images/germany-src-thumb.jpg"
       srcset="http://jonathonleathers.com/images/germany-1x-thumb.jpg 1x,
               http://jonathonleathers.com/images/germany-2x-thumb.jpg 2x"
       alt="Germany"
       data-full-src="http://jonathonleathers.com/images/germany-src.jpg"
       data-full-srcset="http://jonathonleathers.com/images/germany-1x.jpg 1x,
               http://jonathonleathers.com/images/germany-2x.jpg 2x">
  <img src="http://jonathonleathers.com/images/hawaii-src-thumb.jpg"
       srcset="http://jonathonleathers.com/images/hawaii-1x-thumb.jpg 1x,
               http://jonathonleathers.com/images/hawaii-2x-thumb.jpg 2x"
       alt="Hawaii"
       data-full-src="http://jonathonleathers.com/images/hawaii-src.jpg"
       data-full-srcset="http://jonathonleathers.com/images/hawaii-1x.jpg 1x,
               http://jonathonleathers.com/images/hawaii-2x.jpg 2x">
</div>

JS

var $src = $(this).attr('data-full-src');
    var $srcset = $(this).attr('data-full-srcset');
    var $alt = $(this).attr('alt');
    $('#photo-full').attr('src', $src);
    $('#photo-full').attr('srcset', $srcset);
    $('#photo-full').attr('alt', $alt);

for refrence http://codepen.io/jtleathers/pen/IGytf

What's with all these unnecessary attributes and their values?

Zaheer Abbas Aghani · Accepted Answer · 2017-05-16 18:46:46Z

0

jQuery(document).ready(function($) {
  jQuery('.woocommerce-product-gallery__image img').click(function(e) {
    e.preventDefault();
    var src = jQuery(this).attr('src');
    var srcset = jQuery(this).attr('srcset');
    var alt = jQuery(this).attr('alt');
    alert(srcset);
    jQuery('.images .zoom .wp-post-image').attr('src', src);
    jQuery('.images .zoom .wp-post-image').attr('srcset', srcset);
    jQuery('.images .zoom .wp-post-image').attr('alt', alt);
  });
});

answered May 16, 2017 at 18:46

Zaheer Abbas Aghani

296 bronze badges

2 Comments

steliosbl Over a year ago

Code-only answers are generally discouraged as they don't help anyone who might stumble upon this answer other than the OP. Please see How to Answer, as well as this to see why this is the case and what constitutes a good answer. Maybe add some explanation as to what this code does.

Zaheer Abbas Aghani Over a year ago

sorry for that but an average programmer can easily understand it.

Tim Kozak · Accepted Answer · 2022-01-01 10:02:18Z

0

Here is how you get array of URLs from multiple images from "srcset":

$(document).ready(function(){

  //all photos with srcset attribute
  let photos = jQuery(".photos source")

  //iterate to get urls from the set
  let urls = jQuery.map(photos, function (el) {

     //get srcset attribute from the tag
     const rawUrls = jQuery(el).attr('srcset');

     //strip all unnecessary data from the attribute
     const urlsArray = rawUrls.replace(/\s+[0-9]+(\.[0-9]+)?[wx]/g, "").split(/,/);   

     const lastUrlIndex = urlsArray.length - 1;

     //get the last (largest) url from the set for each image
     return urlsArray[lastUrlIndex].trim()
  })

  console.log(urls);

});

edited Jan 1, 2022 at 10:02

answered May 21, 2021 at 18:54

Tim Kozak

4,22244 silver badges44 bronze badges

Collectives™ on Stack Overflow

How to fetch img srcset url using jquery

5 Answers 5

4 Comments

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related