Adding a Height attribute to the image tag
Using cloudinary-react package on a nextjs site to render images. The resulting image tag on the static site has a width attribute, but no height attribute. Is it possible to specify height on the image tag?
-
Hi Jeff,
Thanks for reaching out.
If you want to set the <img/> attributes, you can do this as follows:
<Image
publicId="logo.png"
crop="limit"
style={{ width: "170px"; height:"170px" }}
/>I hope this helps. If not, perhaps you could share your code for how you are creating your images, and also share an example of what you want it to look like.
Kind Regards,
Tia
0 -
@Tia - thank you for your reply. So the styling vis CSS is fine. Its the actual rendered <img /> tag. My resulting tag will show width="" but not the height.
Using Image from cloudianry-react here is my code:
<Image publicId="redacted" alt="image" fetchFormat="auto" dpr="auto" responsive width="auto" crop="scale" responsiveUseBreakpoints="true" loading="lazy">
<Transformation quality="auto" />
<Placeholder type="blur" />
</Image>this will render the image tag like this:
<img alt="image" data-src="redacted/image/upload/q_auto/c_scale,dpr_auto,f_auto,w_auto/redacted.png" style="" class="cld-responsive" data-width="700" src="redacted/image/upload/q_auto/c_scale,dpr_2.0,f_auto,w_700/redacted.png" width="700">
I tried adding height="auto" or height="400" but nothing will show up.
Any advice?
0 -
Hello Jeff,
I apologize for the delay in getting back to you. Could I ask you to open a support ticket here: https://support.cloudinary.com/hc/en-us/requests/new
I ask because I am having some trouble reproducing this on my end, so that will enable us to give you more specialized technical help than here in a public forum. In the ticket, also please confirm if you are using version 1 of our React SDK or version 2. And please share your code there as well.
Thank you so much, and once again, I apologize for the delay.0
Post is closed for comments.
Comments
3 comments