JavaScript SDK quick start guide
In this quick start guide you'll learn how to start delivering your media from Cloudinary using the @cloudinary/url-gen package.
Tip
If you are not familiar with Cloudinary, we advise starting with the Developer get started guide for a high-level overview of integrating Cloudinary into your code, and an introduction to the main concepts. You may also find our Glossary helpful to understand Cloudinary-specific terminology.
This quick start assumes you are using pure JavaScript with a bundler, however you can also use the @cloudinary/url-gen
package together with one of the frontend-frameworks packages. For details, see:
Tip
To get a more in-depth understanding of the architecture, you may want to start from the JavaScript SDK introduction. 1. Install package
Install the @cloudinary/url-gen
package using the NPM package manager:
2. Add Cloudinary to your code
Note
This step assumes that you have assets already uploaded in your account. To upload files within your app, see JavaScript SDK image and video upload. Additionally, you can use the CLI to upload files programmatically, or log into your Media Library to upload files manually.// 1. Import classes //=================== // Import the Cloudinary class. import {Cloudinary} from "@cloudinary/url-gen"; // Import any actions required for transformations. import {fill} from "@cloudinary/url-gen/actions/resize"; // 2. Set your cloud name //======================== // Create a Cloudinary instance and set your cloud name. const cld = new Cloudinary({ cloud: { cloudName: 'demo' } }); // 3. Get your image //=================== // Instantiate a CloudinaryImage object for the image with the public ID, 'docs/models'. const myImage = cld.image('docs/models'); // 4. Transform your image //========================= // Resize to 250 x 250 pixels using the 'fill' crop mode. myImage.resize(fill().width(250).height(250)); // 5. Deliver your image // ========================= // Render the image in an 'img' element. const imgElement = document.createElement('img'); document.body.appendChild(imgElement); imgElement.src = myImage.toURL();
3. See the result!
4. Try it yourself
Here's the full example:
This code is also available in GitHub.
Ready to learn more?
- Understand the architecture of the JavaScript SDK and get a more detailed overview of the libraries.
- Find out more about transforming images using
@cloudinary/url-gen
. - Learn about transforming videos using
@cloudinary/url-gen
. - Discover ways to improve load times and make your images responsive and accessible using plugins.
✖️