How to get the src of the html5 picture

Question

I'm trying to get the correct src of the html5 picture tag:

<picture>
<source media="(max-width: 575px)" srcset="/fileadmin/_processed_/7/d/csm_25675374538_e92c22790b_k_0fae925c97.jpg">
<source media="(max-width: 767px)" srcset="/fileadmin/_processed_/7/d/csm_25675374538_e92c22790b_k_b6fa9f6d7f.jpg">
<source media="(max-width: 991px)" srcset="/fileadmin/_processed_/7/d/csm_25675374538_e92c22790b_k_2c0e132222.jpg">
<source media="(max-width: 1199px)" srcset="/fileadmin/_processed_/7/d/csm_25675374538_e92c22790b_k_ad9b3a0b15.jpg">
<!-- FALLBACK -->
<img class="highlight-image" src="/fileadmin/user_upload/25675374538_e92c22790b_k.jpg" alt="" width="1920" height="1280">
</picture>

When I try the following, than I get the path of the fallback image

$('img.highlight-image').attr('src')

But I want the src of the img which is at the screen.

@IslamElshobokshy It's actually a duplicate as you can see. – ingdc Dec 18 '18 at 14:02 — ingdc, Dec 18 '18 at 14:02

score 1 · Accepted Answer · answered Dec 18 '18 at 13:55

1

Hope this works for you.

$(document).ready(function() {
    const img = $('img.highlight-image');
    console.log(img[0].currentSrc); // returns the current shown image
});

answered Dec 18 '18 at 13:55

Peter Bode

222
1
9

1

thank you, currentSrc was the correct hint – Ralf Dec 18 '18 at 13:57
Good I could help! Good luck with the project! – Peter Bode Dec 18 '18 at 13:58

score 0 · Answer 2 · answered Dec 18 '18 at 13:53

0

your code looks fine, but it returns a array so you can try to use

$('img.highlight-image').first().attr('src')

answered Dec 18 '18 at 13:53

Lucas

275
8
37

How to get the src of the html5 picture

2 Answers2