text:
Multiple image sources problem

I'm having trouble getting this to work correctly. I also want to use .webp but it's always loading the default image. If I remove the src attribute the class becomes b-error. How can I get it to work correctly?

                <picture>

                    <source type="image/webp" data-srcset="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-lg.webp, images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-lg-2x.webp 2x" media="(max-width: 74.9em)">
                    <source type="image/webp" data-srcset="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-md.webp, images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-md-2x.webp 2x" media="(max-width: 61.9em)">
                    <source type="image/webp" data-srcset="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-sm.webp, images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-sm-2x.webp 2x" media="(max-width: 47.9em)">
                    <source type="image/webp" data-srcset="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-xs.webp, images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-xs-2x.webp 2x" media="(max-width: 33.9em)">

                    <source data-srcset="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-lg.jpg, images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-lg-2x.jpg 2x" media="(max-width: 74.9em)">
                    <source data-srcset="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-md.jpg, images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-md-2x.jpg 2x" media="(max-width: 61.9em)">
                    <source data-srcset="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-sm.jpg, images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-sm-2x.jpg 2x" media="(max-width: 47.9em)">
                    <source data-srcset="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-xs.jpg, images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-xs-2x.jpg 2x" media="(max-width: 33.9em)">

                </picture>

I'm also having issues using picture elements. Does it work if you only have jpegs?

Hey @stalinkay, @tortilaman & @idoshamun
You only have this issue in safari, right? It works fine in chrome, firefox etc?

I've tested it in Chrome when I reported.
In Safari due to partial support in picture element I use only img with
srcset.
On Sun, Oct 9, 2016, 17:36 dinbror notifications@github.com wrote:
Hey @stalinkay https://github.com/stalinkay, @tortilaman
https://github.com/tortilaman & @idoshamun https://github.com/idoshamun
You only have this issue in safari, right? It works fine in chrome, firefox
etc?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/dinbror/blazy/issues/92#issuecomment-252490001, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AB5qHbzGah0EC8ZIwxNUCiKfqGDsKhDvks5qyPv4gaJpZM4Ie08j
.

@idoshamun
Did you also test with just jpegs? When I look at my examples page in chrome it shows a non fallback/default image: http://dinbror.dk/blazy/examples/ (example 1.5).
I know it makes two image requests

I haven't test with just jpegs but in my use case it shows the right image but my problem is the two requests as you said.
I've already created a PR to solve this for the picture case, please refer to #108

Kind of same issue here. In my case, it always loads the default image. I'm using jpg. And i've tested the same html without blazy and data-attributes and it works correctly. I'm on latest firefox.

@idoshamun
Ok thanks. Was unsure if some of you guys also had issues where it only loaded the fallback image. I'll implement a fix soon. Your PR still need to implement the success callback. No big deal but I want to avoid the redundancy of it.
@stratboy
So it loads two images, the fallback and image 1 or 2 depending on screen resolution or do you always only get the default image? The multiple requests I know and will implement a fix soon.

Great! Waiting for the fix, I use my fork meanwhile
On Mon, Oct 10, 2016, 23:04 dinbror notifications@github.com wrote:

@idoshamun https://github.com/idoshamun
Ok thanks. Was unsure if some of you guys also had issues where it only
loaded the fallback image. I'll implement a fix soon. Your PR still need to
implement the success callback. No big deal but I want to avoid the
redundancy of it.
@stratboy https://github.com/stratboy
So it loads two images, the fallback and image 1 or 2 depending on screen
resolution or do you always only get the default image? The multiple
requests I know and will implement a fix soon.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/dinbror/blazy/issues/92#issuecomment-252731805, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AB5qHXVuSxF_AsuytxyvOBFIt2v_Ikm6ks5qypppgaJpZM4Ie08j
.

Fixed in v. 1.7.0.

@dinbror
In my case it shows ONLY the default one.

@stratboy
Hmm ok that's odd. I only have the issue in safari. In latest chrome and firefox it is working fine. What image do you see on my examples page, example 1.5?
http://dinbror.dk/blazy/examples/

@dinbror
Hey you are blazing fast in answering ;)
Honestly, I see the right ones, they correctly change based on media queries (default, min-465, min-650). So maybe there's something wrong on my code, I know, but the very strange thing is that, as I wrote, if I take away the data- piece of string (so srcset="img1.jpg" instead of data-srcset="img1.jpg") and deactivate blazy (so no js), all is working fine. In other words, for the browser itself the html code is just fine and works.

@stratboy
Really odd. Do you have a live example?

@dinbror
I'm trying to build a jsfiddle but having some trouble with external resources. I cannot post the website staging url here, is there a way to private-message?

Ok man, a couple of links here, I will delete them from here right after debugging. They're really row, without any styling, and with 3 images. The markup is quite about the same of the real website. This with blazy (doesn't work):
http://www.reghellin.com/debug/index.html
This with pure html (works > under 640px you'll see images become dark green):
http://www.reghellin.com/debug/index-alt.html

Hey @stratboy
Try to change this:
<picture>
   <source media="(max-width: 640px)" data-srcset="images/small/1.jpg">
   <source media="(max-width: 830px)" data-srcset="images/1.jpg">

</picture>

to
<picture>
   <source media="(max-width: 640px)" data-srcset="images/small/1.jpg">
   <source media="(max-width: 830px)" data-srcset="images/1.jpg">

</picture>

Mmm, corrected the link to blazy (sorry) and changed the html but no luck. Please see for yourself:
http://www.reghellin.com/debug/index.html

@stratboy
Add an alt attribute to the img-tag (not empty).
@dinbror

Hmm ok that's odd. I only have the issue in safari. In latest chrome and firefox it is working fine. What image do you see on my examples page, example 1.5?
http://dinbror.dk/blazy/examples/

I have the same issue in safari and internet explorer. Any idea for a bug fix or workaround?

christopherwiegel: ok, but is the alt attribute all about with a preload task? Also, if anyway the whole thing is not going to work with safari and explorer, probably on a production website the best thing is to still use the legacy old way right?

I'll look into a fix

@stratboy what do you mean with "still use the legacy old way right"

Fixed in v. 1.7.1

Ok I confirm it's working properly even in firefox (at least latest). Thank you!

No, it doesn't work at least in IE11. So using the picture element it's not a shim and not a viable alternative to the legacy blazy's 'breakpoints' option. You probably should not mark that option as obsolete until the other solutions are fully crossbrowser (in other words, until blazy will act a real shim/polyfill).

Also, as per the the responsive images community group, you probably should enforce the use of srcset on the img tag instead of src > that's the main reason you had the double-loading probled I guess.
Please see the gothas here:
https://github.com/scottjehl/picturefill
https://scottjehl.github.io/picturefill/
https://responsiveimages.org/

Hey @stratboy
What version of blazy are you using when you test in IE 11?
V. 1.7.1 works fine in IE11, but v.1.8 doesn't. Will send out a fix later

Hi, yes, I'm using v1.8
dinbror ha scritto:

Hey @stratboy https://github.com/stratboy
What version of blazy are you using when you test in IE 11?
V. 1.7.1 works fine in IE11, but v.1.8 doesn't. Will send out a fix later
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/dinbror/blazy/issues/92#issuecomment-255079795,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAatXilgbre5B-V4mH8VNt_TfnuT3WeFks5q10_LgaJpZM4Ie08j.

Hey @stratboy
Could you please try v. 1.8.1

Hello,
Sorry to reopen this issue, but it seems that we have the bug again on IE11.
If I visit this page: http://dinbror.dk/blazy/examples/ with IE11 on the example with multiple sources, it only displays the default image and don't consider the source tags.
See attachment:

Hi @yvmarques
The picture element isn't supported in IE11 or in IE at all. You need to use a polyfill if you want support

I forgot to mention that I am using the picturefill 3.0.2 as well.

We currently have the same issue

I also opened up a new issue for this: https://github.com/dinbror/blazy/issues/140

authors: christopherwiegel dinbror goldquest idoshamun stalinkay stratboy tortilaman yvmarques

repo: dinbror/blazy