Adding a Height attribute to the image tag

Follow

Jeff Byer

• January 11, 2022 18:55

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?

0

• 

  Tia Esguerra

  • January 12, 2022 17:42

  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

  Comment actions Permalink
• 

  Jeff Byer

  • January 12, 2022 19:56

  @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

  Comment actions Permalink
• 

  Tia Esguerra

  • January 14, 2022 23:23

  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

  Comment actions Permalink

Post is closed for comments.