Bilder CDN für komprimierte, pixelgenaue und responsive Bilder

/* 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>
  );
};