Hello,

Situation: I am loading a Next Image dynamically into my React component, with its width and height parameters calculated in an useEffect hook.

Problem: the image does not load with the calculated width and height. The height of the loaded image is significantly smaller.

Workaround: if I add the following CSS style suggested by AI into the image element, it loads with the calculated width and height.

<Image
    src={image.url}
    width={image.dimensions.width}
    height={image.dimensions.height}
    style={width: image.dimensions.width + 'px', height: image.dimensions.height + 'px', transition: 'width  0.1s ease, height 0.1s ease'}
    alt="Loaded Image"
/>

Question 1: Any idea on why this workaround work ? Why do I need it ?
Question 2: Is anyone aware of an equivalent Tailwind CSS way of expressing this CSS style ?

Thanks in advance