'Why Image attribute is not working in JSX
<Image loading="lazy" src="/assets/blog/image.webp" alt="image photo" width="867" height="1300" style={{ maxWidth: '500px' }} />
maxWidth is not working in JSX.
Solution 1:[1]
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' }} />
Solution 2:[2]
<Image
loading="lazy"
src="/assets/blog/image.webp"
alt="image photo"
height={1300}
style={{ maxWidth: '500px',width:"100%" }}
/>
This should work.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Dharmik Patel |
| Solution 2 |