Cloudinary React component not rendering width or height transformation to URL

Question

I'm integrating Cloudinary into my React app at the moment. I want to display images at 300px height (automatic width), and set format and quality to auto. Here's my component:

import React from 'react'
import {Image, Video, Transformation, CloudinaryContext} from 'cloudinary-react';

const AddContent = () => {
  return (
    <div id="add-content">
      <CloudinaryContext cloudName="mycloudname">
        <Image publicId="samples/food/spices">
          <Transformation height={300} quality="auto" fetchFormat="auto" />
        </Image>
      </CloudinaryContext>
    </div>
  );
}

export default AddContent;

This is resulting in the following image tag:

<img src="http://res.cloudinary.com/mycloudname/image/upload/f_auto,q_auto/v1/samples/food/spices">

So, the f_auto and q_auto are fine, but it's missing the h_300 tag.

Answer 1

You'll need to add the 'crop' mode when resizing. Try with -

<Transformation height={300} crop="scale" quality="auto" fetchFormat="auto" />