Image CDN pour délivrer des images compressées et responsives

/* Add the js-cloudimage-responsive library */

import 'js-cloudimage-responsive';
 
/* iniatialise it with your token */

const ciResponsive = new window.CIResponsive({ token: 'doc' });
 

<!— just use ci-src instead of the src attribute in image tag in your html pages —>


<img ci-src="https:/sample.li/boat.jpg" ci-ratio="1.5"/>

/* Add the ng-cloudimage-responsive library */

import { CIModule, CIConfig } from 'ng-cloudimage-responsive';
 
@NgModule({

 declarations: [ AppComponent ],

 imports: [ BrowserModule, CIModule ],

 providers: [

 /* iniatialise it with your token in your root component */

 { provide: CIConfig, useValue: { token: ‘doc’ } }

 ],

 bootstrap: [ AppComponent ]

})
 
export class MyAppModule {}
 
<!— use the ci-img component to get fully responsive images —>



<ci-img src="img.jpg" alt="Demo image" ratio="1.5"></ci-img>

  

/* Add the vue-cloudimage-responsive library */
import Img, { CloudimageProvider } from 'vue-cloudimage-responsive';
 
<template>
  <div id="app">
/* iniatialise it with your token in your root component */

    <CloudImageProvider v-bind:cloudImageConfig=“{ token: ‘doc’  }“>
    
 
/* Use Img component to get fully responsive images */

      <Img src="https://doc.cloudimg.io/sample.li/boat.jpg" alt="Demo image"/>
    </CloudImageProvider>
  </div>
</template>

<script>export default{ components: { CloudimageProvider, Img } }</script>
  

/* Add the react-cloudimage-responsive library */
import Img, { CloudimageProvider } from 'react-cloudimage-responsive'';
 
const App = () => {
  return (
/* iniatialise it with your token in your root component */

    <CloudimageProvider config={{ token: 'doc' }}>
 
/* Use Img component to get fully responsive images */

      <Img src="https://doc.cloudimg.io/sample.li/boat.jpg" alt="Demo image" ratio={1.5}/>
    
</CloudimageProvider>
  );
};