Images don't seem to work correctly in amp-mode.

[builderio]

Images don't seem to work correctly in amp-mode.

[homanp]

Seems like the image tag is not rendered even though it's visible in the editor.

[homanp]

Here is how it looks inside the editor. I can also verify that there are no img or amp-img tags in the document for some reason.

[kevva]

@steve8708, this should probably reopened. Here's an example img tag:

<img decoding="async" sizes="(max-width: 638px) 95vw, (max-width: 998px) 97vw,  54vw" src="https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fda62cf9c04b04780b4cf5ee4103e8f85?width=966" srcset="https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fda62cf9c04b04780b4cf5ee4103e8f85?width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fda62cf9c04b04780b4cf5ee4103e8f85?width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fda62cf9c04b04780b4cf5ee4103e8f85?width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fda62cf9c04b04780b4cf5ee4103e8f85?width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fda62cf9c04b04780b4cf5ee4103e8f85?width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fda62cf9c04b04780b4cf5ee4103e8f85?width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fda62cf9c04b04780b4cf5ee4103e8f85?width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fda62cf9c04b04780b4cf5ee4103e8f85?width=966, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fda62cf9c04b04780b4cf5ee4103e8f85?width=606 606w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fda62cf9c04b04780b4cf5ee4103e8f85?width=966 966w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fda62cf9c04b04780b4cf5ee4103e8f85?width=749 749w" class="i-amphtml-fill-content i-amphtml-replaced-content">

The problem here seems to be the CDN which doesn't serve the images with the correct size even though the width parameter is set.

[steve8708]

Hey @kevva - which images look wrong to you? I'm clicking through the various links and seeing the right sizes (e.g. width=100 gives me a 100px wide image https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fda62cf9c04b04780b4cf5ee4103e8f85?width=100)

Note thought that width is considered a max width. We won't increase an images size since that would lead to an unnecessarily large and pixelated image, so the only known time that the CDN will return a differently size image is if the width param is larger than the originally uploaded image's width

[kevva]

@steve8708, sorry, my mistake. It must've been something wrong with my eyes. However, the issue still remains and it looks like some of the images are missing a width in their srcset, eg:

<img decoding="async" sizes="(max-width: 638px) 95vw, (max-width: 998px) 97vw,  27vw" src="https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fa1ad2666656f402c8ad345feedde0e85?width=966" srcset="https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fa1ad2666656f402c8ad345feedde0e85?width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fa1ad2666656f402c8ad345feedde0e85?width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fa1ad2666656f402c8ad345feedde0e85?width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fa1ad2666656f402c8ad345feedde0e85?width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fa1ad2666656f402c8ad345feedde0e85?width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fa1ad2666656f402c8ad345feedde0e85?width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fa1ad2666656f402c8ad345feedde0e85?width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fa1ad2666656f402c8ad345feedde0e85?width=966, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fa1ad2666656f402c8ad345feedde0e85?width=606 606w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fa1ad2666656f402c8ad345feedde0e85?width=966 966w, https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fa1ad2666656f402c8ad345feedde0e85?width=366 366w" class="i-amphtml-fill-content i-amphtml-replaced-content">

Notice that there is one image (https://cdn.builder.io/api/v1/image/assets%2F24f5a903f204406989735cec9b19a2ae%2Fa1ad2666656f402c8ad345feedde0e85?width=966) that doesn't have a size. I can see it on multiple images, but not all for some reason.

[steve8708]

Ah I see, maybe it doesn't like that the default URL is the same size as one of the generated URLs in srcset too - assigning to @teleaziz to investigate futher