Bug with dynamically loaded Next Image
Unanswered
Californian posted this in #help-forum
CalifornianOP
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.
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
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