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

您需要在调整大小时添加 'crop' 模式。尝试 -

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

Cloudinary React 组件未将宽度或高度转换为 URL

Cloudinary React component not rendering width or height transformation to URL

image-manipulation

cloudinary

reactjs