Cloudinary Transformations

Render an Image with Advanced Image

import {AdvancedImage} from '@cloudinary/react';

import {Cloudinary} from "@cloudinary/url-gen";

import {Transformation} from "@cloudinary/url-gen";

export default function App() {

const cld = new Cloudinary({

cloud: {

cloudName: 'demo'

}

});

const myImage = cld.image('front_face');

// return <h1>Hello Sandpack</h1>

return (

<div>

</div>

)

}

import {AdvancedImage} from '@cloudinary/react';

import {Cloudinary} from "@cloudinary/url-gen";

import {Transformation} from "@cloudinary/url-gen";

// Import required actions.

import {thumbnail, scale} from "@cloudinary/url-gen/actions/resize";

import {byRadius} from "@cloudinary/url-gen/actions/roundCorners";

import {sepia} from "@cloudinary/url-gen/actions/effect";

import {source} from "@cloudinary/url-gen/actions/overlay";

import {opacity,brightness} from "@cloudinary/url-gen/actions/adjust";

import {byAngle} from "@cloudinary/url-gen/actions/rotate"

// Import required qualifiers.

import {image} from "@cloudinary/url-gen/qualifiers/source";

import {Position} from "@cloudinary/url-gen/qualifiers/position";

import {compass} from "@cloudinary/url-gen/qualifiers/gravity";

import {focusOn} from "@cloudinary/url-gen/qualifiers/gravity";

import {FocusOn} from "@cloudinary/url-gen/qualifiers/focusOn";

export default function App() {