Adding a Height attribute to the image tag

Comments

3 comments

  • Avatar
    Tia Esguerra

    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
  • Avatar
    Jeff Byer

    @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
  • Avatar
    Tia Esguerra

    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

Please sign in to leave a comment.