Upgrading to v3 of image component distorts current site images

[JonMaguire]

We are working on upgrading our image component from V2 to V3. I’m running into an issue with the images our on our site displaying larger in height and out of proportion. I am wondering if anyone else has experienced this and/or knows of a solution.

We do have widths set in the image component properties.

I tried also experimenting with the new width property. It helps, but some images look better than others, and the images are still not correct.

As a test, I tried updating the image component in the we.retail site and have the same issue. Is there an added config for this component I am missing for V3? We are using AEM 6.5.12 and AEM Core Components 2.19.0.

[JonMaguire]

I deferred upgrading this to work on other things but am now returning and the same issue is occurring. Hopefully this will bump the question back up in the list.

[sreenu539]

were you able to solve this issue. I am facing same issue 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/teaser-v2-image-rendering-...

@JonMaguire 

[JonMaguire]

Hi @sreenu539,

What worked for us were two things:

1. We missed adding core.wcm.components.image.v3 to the embed property of clientlib.base
2. We had to rebuild the clientlibs after deploying. Once that was done, the images rendered correctly.

Also, make sure your width and height properties are present.