@cloudinary/svelte v1.0.0-beta.11

Cloudinary Frontend Frameworks

About this project

This project contains SDKs designed to work with Cloudinary base These SDKs will render CloudinaryImage or CloudinaryVideo object into the DOM.

Packages contained within this project:

• {@link accessibility|accessibility} - Used to make your images more accessible to your users with visual disabilities.
• {@link lazyload|lazyload} - Used to delay loading images if they are not yet visible on the screen.
• {@link placeholder|placeholder} - Used to display a lightweight version of an image while the target image is downloading.
• {@link responsive|responsive} - Used to resize your images automatically based on the viewport size.

Installation

To get started, install the npm client package of your choice along with our base package. For example, to use Cloudinary in a React environment, the following packages should be installed:

npm i @cloudinary/react @cloudinary/base

Note: To use Angular install @cloudinary/angular

For more information on our supported frameworks, navigate to the frameworks tab.

Simple usage

The following is a simple example using React. For more information on React and other frameworks, navigate to the frameworks tab.

// Import the cloudinary class, and the plugins you want to use
// In this case, we import a Cloudinary image type and accessibility and responsive.

import React, { Component } from 'react'
import {Cloudinary} from "@cloudinary/base";
import { AdvancedImage, accessibility, responsive } from '@cloudinary/react';

// Once per project/app - configure your instance,
// See the documentation in @cloudinary/base for more information 
const myCld = new Cloudinary({ cloudName: 'demo'});

// render your component
 const App = () => {
    // Create your image
    // This creates a new image object
    let img = myCld().image('sample');
    return (
        <div>
            <AdvancedImage cldImg={img} plugins={[responsive(), accessibility()]}/>
        </div>
    )
  };

Plugin Order

<AdvancedImage plugins={[lazyload(),responsive(), accessibility(), placeholder()]}/>

You can omit any plugin, but the order from above should remain.