reactjs - Cloudinary React component not rendering width or height transformation to URL
问题描述
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.
解决方案
调整大小时,您需要添加“裁剪”模式。尝试 -
<Transformation height={300} crop="scale" quality="auto" fetchFormat="auto" />
推荐阅读
- swift - 从数组中删除对象时,SwiftUI 中的内存不会减少
- hibernate - 即使在选择时也没有进行任何更改,JSONB 列会创建审核条目
- java - Spring Boot 请求作用域 Bean
- python - 查找/读取操作的 MyPy 类型错误
- django - 如何在模板内访问我在 django 视图中定义的函数(用于 UTF 编码)
- python - 如何从django中的外键获取数据
- reactjs - React + passport-local-mongoose 会话问题
- python - 关于不使用 Pandas 打印某些行的问题
- postgresql - 通过函数调用使用 Postgresql 的 EXTRACT 工具的困难
- python - 使用 numpy 进行 K 折交叉验证