Cloudinary React组件没有渲染宽度或高度转换到URL。

Question

我目前正在将Cloudinary集成到我的React应用中。我想在 300px 高度（自动宽度），并将格式和质量设置为 auto. 这是我的组件。

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;

这导致了下面的图像标签

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

所以，这个... f_auto 和 q_auto 都很好，但它缺少了 h_300 标签。

Answer 1

你需要在调整大小时添加 "裁剪 "模式。试试用--------------------------。

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