Why Image attribute is not working in JSX

user_15522051 0
Viewed 105
<Image loading="lazy" src="/assets/blog/image.webp" alt="image photo" width="867" height="1300" style={{ maxWidth: '500px' }} />

maxWidth is not working in JSX.

jsx next.js reactjs
2 Answers

It is not working because you have applied width="867" to the component which overrides style={{ maxWidth: '500px' }} the maxWidth specified in the inline css.

Remove width="867" attribute from the component and try using the below code:

<Image ... height="1300" style={{ maxWidth: '500px', width: '..px' }} />
user_104982560 
<Image 
 loading="lazy"
 src="/assets/blog/image.webp"
 alt="image photo"
 height={1300}
 style={{ maxWidth: '500px',width:"100%" }}
/>

This should work.

user_151162070
Related