Welcome to PictureRenderer.Optimizely Discussions!

[ErikHen]

👋 Welcome!

Here you can:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.

[yorkim]

Hi!
I thought I'd kick off the discussion by posting an issue I have where the image URL's gets printed out as "undefined" within the picture element (see code block below). I assume this is a configuration error on my part but I can't figure out what to do to correct this. Is this something anyone else has seen when using this package?

I'm doing services.AddBaaijteOptimizelyImageSharp() early in my service configuration (before any CMS related configuration) and app.UseBaaijteOptimizelyImageSharp(); in my app configuration. I have no problems rendering images in general, just when using this package.

<picture>
   <source srcset="undefined" sizes="(max-width: 640px) 100vw, (max-width: 1200px) 320px, 750px" type="image/webp">
   <source srcset="undefined" sizes="(max-width: 640px) 100vw, (max-width: 1200px) 320px, 750px">
   <img alt="" src="undefined" loading="lazy" decoding="async">
</picture>```

[ErikHen]

I have never seen that happen. Very odd.
Can you show how you define your picture profile, and how you call Picture.Render ?

[yorkim]

I just found the culprit. When inspecting the generated markup via the developer toolbar I got the markup i posted earlier with "undefined" as URL. However, when viewing the page source i saw that the markup was actually correct with proper URLs. This lead me to believe that there were some browser (Edge) shenanigans going on so I tested in Firefox but it presented the exact same behaviour. It turns out that for some reason the Lazy Loading weren't working properly so when I rendered the image with LazyLoading.None it worked. It's obviously a bit sneaky since lazy loading is on by default but I assume it is the preferred use case when it's working as expected.