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="?$600x160$" alt="">

I need to fetch above srcset value("?$600x160$") and append the same value for src attribute. Kindly help.

Thanks in advance.

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./is/image/Hod/Mobile600x160?$600x160$" alt="">

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

Thanks in advance.

• javascript
• jquery

Share Improve this question Follow asked Jul 14, 2016 at 6:45 vsmvsm 16911 gold badge33 silver badges1212 bronze badges 1

• 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 bination with 'sizes' attribute. – Mario Santini Commented Jul 14, 2016 at 7:21

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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');
  });
});

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img class="img" srcset="http://s7d2.scene7./is/image/Hod/Mobile600x160?$600x160$" alt="">
<img class="img" srcset="http://s7d2.scene7./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.

HTML

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

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

jQuery(document).ready(function($) {
  jQuery('.woomerce-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);
  });
});

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

});