Comments (2)
Hey @AlexanderFalkenberg, thanks for reaching out!
Delivery URLs are built using the @cloudinary/url-gen
library, which allows you to choose the desired format.
import {Cloudinary} from "@cloudinary/url-gen";
const cld = new Cloudinary({
cloud: {
cloudName: 'demo'
}
});
const myImage = cld.image('sample');
myImage.format('webp');
const myUrl = myImage.toURL();
Here is an example of using the AdvancedImage component in React with the format set to webp
(modification of this example) -
import React from "react";
import { Cloudinary } from "@cloudinary/url-gen";
import { AdvancedImage, responsive } from "@cloudinary/react";
const App = () => {
const cld = new Cloudinary({
cloud: {
cloudName: "demo"
}
});
const myImage = cld.image("sample");
myImage.format("webp");
// Use the responsive plugin (optional)
return (
<div>
<AdvancedImage cldImg={myImage} plugins={[responsive()]} />
</div>
);
};
export default App;
An important thing to note is that it is highly recommended to use the auto
format option (i.e - myImage.format('auto')
) which uses our automatic format selection algorithm, more info here.
from frontend-frameworks.
Closing this issue as it was answered, if you have further questions please feel free to open a new issue.
from frontend-frameworks.
Related Issues (20)
- Adding @cloudinary/ng package removes ng-reflect-* attributes HOT 9
- Cannot read properties of null (reading 'toURL') for cloudinary/ng HOT 6
- New issue for cloudinary/frontend-frameworks HOT 1
- @cloudinary/[email protected]" has incorrect peer dependency "@angular/common@^10.0.0 || ^11.0.0 || ^12.0.0". HOT 4
- Does responsive plugin work as it should in React SDK? HOT 6
- cannot use dpr(auto()) in React component (React SDK) HOT 2
- Create Ivy distribution HOT 6
- Errors building React app with @cloudinary/url-gen (eg: "export 'RoundCorners' (imported as 'RoundCorners') was not found in '@cloudinary/url-gen/actions/roundCorners' (module has no exports)") HOT 7
- Cannot find module '@cloudinary/url-gen' or its corresponding type declarations. HOT 2
- Quality transformation gets added twice (React SDK) HOT 1
- Vue 3 Support HOT 2
- Allow authentication token to be passed to React components HOT 4
- Uncaught promise TypeError: Cannot read properties of undefined (analyticsOptions) HOT 2
- Allow adding custom class to video tag HOT 6
- Angular advanced-image does not update width and height inputs on responsive design HOT 5
- AdvancedImage component responsiveness compromised with conflicting plugins in React (17 and 18) HOT 2
- Placeholder plugin not doing anything HOT 5
- import { audio } from "@cloudinary/url-gen/qualifiers/source"; missing in "@cloudinary/react": "^1.11.2", HOT 3
- Browser keep crashing with @cloudinary/ng when try use it inside loop in Angular HOT 6
- Image flickering when using @cloudinary/react lazyload after adding alt text HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from frontend-frameworks.