{"id":20306150,"url":"https://github.com/scaleflex/vue-cloudimage-responsive-blur-hash","last_synced_at":"2026-03-19T15:09:55.194Z","repository":{"id":59844623,"uuid":"281065236","full_name":"scaleflex/vue-cloudimage-responsive-blur-hash","owner":"scaleflex","description":"Cloudimage Responsive will smartly resize, compress and accelerate images across the World in your site for all devices. The plugin supports lazy loading technique with fancy animation on image load. Any questions or issues, please report to https://github.com/scaleflex/vue-cloudimage-responsive-blur-hash/issues","archived":false,"fork":false,"pushed_at":"2022-10-03T15:57:52.000Z","size":156,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-04T07:26:29.961Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scaleflex.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-20T08:53:12.000Z","updated_at":"2022-11-01T14:05:21.000Z","dependencies_parsed_at":"2023-01-19T03:31:12.038Z","dependency_job_id":null,"html_url":"https://github.com/scaleflex/vue-cloudimage-responsive-blur-hash","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/scaleflex/vue-cloudimage-responsive-blur-hash","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scaleflex%2Fvue-cloudimage-responsive-blur-hash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scaleflex%2Fvue-cloudimage-responsive-blur-hash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scaleflex%2Fvue-cloudimage-responsive-blur-hash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scaleflex%2Fvue-cloudimage-responsive-blur-hash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scaleflex","download_url":"https://codeload.github.com/scaleflex/vue-cloudimage-responsive-blur-hash/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scaleflex%2Fvue-cloudimage-responsive-blur-hash/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30222511,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T17:00:40.062Z","status":"ssl_error","status_checked_at":"2026-03-07T17:00:39.026Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T17:12:10.379Z","updated_at":"2026-03-07T17:04:58.562Z","avatar_url":"https://github.com/scaleflex.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Release](https://img.shields.io/github/v/release/scaleflex/vue-cloudimage-responsive-blur-hash)](https://github.com/scaleflex/vue-cloudimage-responsive-blur-hash/releases)\n[![Free plan](https://img.shields.io/badge/price-includes%20free%20plan-green.svg)](https://www.cloudimage.io/en/home#b38181a6-b9c8-4015-9742-7b1a1ad382d5)\n[![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n[![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.com/en/home)\n[![Cloudimage](https://img.shields.io/badge/Powered%20by-cloudimage-blue)](https://www.cloudimage.io/en/home)\n## VERSIONS\n\n- [**Low Quality Preview**](https://github.com/scaleflex/vue-cloudimage-responsive)\n- **Blur Hash**\n- [**Plain (CSS free)**](https://github.com/scaleflex/vue-cloudimage-responsive-plain)\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://www.cloudimage.io/#gh-light-mode-only\"\u003e\n\t\t\u003cimg\n\t\t\talt=\"The Lounge\"\n\t\t\tsrc=\"https://scaleflex.cloudimg.io/v7/cloudimage.io/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d\u0026w=350\"\u003e\n\t\u003c/a\u003e\n\t\t\u003ca href=\"https://www.cloudimage.io/#gh-dark-mode-only\"\u003e\n\t\t\u003cimg\n\t\t\talt=\"The Lounge\"\n\t\t\tsrc=\"https://scaleflex.cloudimg.io/v7/cloudimage.io/cloudimage-logo-light.png?vh=b798ab\u0026w=350\"\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\n   Vue Cloudimage Responsive | Cloudimage v7\n\u003c/h1\u003e\n\n\u003ch3 align=\"center\"\u003e\n(blur hash placeholder)\n\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003cstrong\u003e\n\t\t\u003ca href=\"#table-of-contents\"\u003eDocs\u003c/a\u003e\n\t\t•\n   \u003ca href=\"https://scaleflex.github.io/vue-cloudimage-responsive-blur-hash/\" target=\"_blank\"\u003eDemo\u003c/a\u003e\n\t\t•\n\t\t\u003ca href=\"https://codesandbox.io/s/vue-cloudimage-responsive-blur-hash-example-jrh4e4\" target=\"_blank\"\u003eCode Sandbox\u003c/a\u003e\n\t\t•\n\t\t\u003ca href=\"https://medium.com/@dmitry_82269/responsive-images-in-2019-now-easier-than-ever-b76e5a43c074\" target=\"_blank\"\u003eWhy?\u003c/a\u003e\n\t\u003c/strong\u003e\n\u003c/p\u003e\n\nThis plugin detects the width of any image container as well as the device pixel ratio\ndensity to load the optimal image size needed.\nImages are resized on-the-fly via the \u003ca href=\"https://cloudimage.io\" target=\"_blank\"\u003eCloudimage service\u003c/a\u003e, thus offering a comprehensive\nautomated image optimization service.\n\nWhen an image is first loaded on your website or mobile app,\nCloudimage's resizing servers will download the origin image from\nthe source, resize it for the client's screen size and deliver to your users through one or multiple\nContent Delivery Networks (CDNs). The generated image formats are cached in the CDN and will be delivered rocket fast on any subsequent request.\n\n**NOTE:** Your original (master) images should be stored on a server\nor storage bucket (S3, Google Cloud, Azure Blob...) reachable over\nHTTP or HTTPS by Cloudimage. If you want to upload your master images to\nCloudimage, contact us at\n[hello@cloudimage.io](mailto:hello@cloudimage.io).\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg\n\t\talt=\"The Lounge\"\n\t\tsrc=\"https://cdn.scaleflex.it/filerobot/cloudimage-process.jpg\"\u003e\n\u003c/p\u003e\n\npowered by [Cloudimage](https://www.cloudimage.io/)\n([Watch the video here](https://www.youtube.com/watch?time_continue=2\u0026v=JFZSE1vYb0k))\n\n## Table of contents\n\n- [Demo](#demo)\n- [Responsive plugins family](#plugin_family)\n- [Compatibility](#compatibility)\n- [Requirements](#requirements)\n- [Step 1: Installation](#installation)\n- [Step 2: Initialize](#initialize)\n- [Step 3: Implement](#implement)\n- [Configuration](#configuration)\n- [Image properties](#image_properties)\n- [Browser support](#browser_support)\n- [Filerobot UI Family](#ui_family)\n- [Contributing](#contributing)\n- [License](#license)\n\n## \u003ca name=\"demo\"\u003e\u003c/a\u003e Demo\n\nTo see the Cloudimage Responsive plugin in action, please check out the\n[Demo page](https://github.com/scaleflex/vue-cloudimage-responsive-blur-hash).\nPlay with your browser's window size and observe your\nInspector's Network tab to see how Cloudimage delivers the optimal\nimage size to your browser, hence accelerating the overall page\nloading time.\n\n## \u003ca name=\"plugin_family\"\u003e\u003c/a\u003e Responsive plugins family\nIn order to use Cloudimage responsive plugins on your single-page application, please check out Cloudimage responsive plugins for vanilla Javascript and the most popular Javascript frameworks.\n\n\u003cdetails\u003e\n\u003csummary\u003eJavascript\u003c/summary\u003e\n\u003ca href=\"https://github.com/scaleflex/js-cloudimage-responsive\"\u003eJs Cloudimage Responsive (Low Quality Preview)\u003c/a\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/scaleflex/js-cloudimage-responsive/blob/master/README-BLUR-HASH.md\"\u003eJs Cloudimage Responsive (Blur-hash)\u003c/a\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/scaleflex/js-cloudimage-responsive/blob/master/README-PLAIN.md\"\u003eJs Cloudimage Responsive (Plain)\u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eReact\u003c/summary\u003e\n\u003ca href=\"https://github.com/scaleflex/react-cloudimage-responsive\"\u003eReact Cloudimage Responsive (Low Quality Preview)\u003c/a\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/scaleflex/react-cloudimage-responsive-blur-hash\"\u003eReact Cloudimage Responsive (Blur-hash)\u003c/a\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/scaleflex/react-cloudimage-responsive-plain\"\u003eReact Cloudimage Responsive (Plain)\u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNext.js\u003c/summary\u003e\n\u003ca href=\"https://github.com/scaleflex/next-cloudimage-responsive\"\u003eVue Cloudimage Responsive (Low Quality Preview)\u003c/a\u003e\u003cbr/\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVue.js\u003c/summary\u003e\n\u003ca href=\"https://github.com/scaleflex/vue-cloudimage-responsive\"\u003eVue Cloudimage Responsive (Low Quality Preview)\u003c/a\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/scaleflex/vue-cloudimage-responsive-blur-hash\"\u003eVue Cloudimage Responsive (Blur-hash)\u003c/a\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/scaleflex/vue-cloudimage-responsive-plain\"\u003eVue Cloudimage Responsive (Plain)\u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eAngular\u003c/summary\u003e\n\u003ca href=\"https://github.com/scaleflex/ng-cloudimage-responsive\"\u003eAngular Cloudimage Responsive (Low Quality Preview)\u003c/a\u003e\u003cbr/\u003e\n\u003c/details\u003e\n\n## \u003ca name=\"compatibility\"\u003e\u003c/a\u003e Compatibility\n| Version | Vue Version |\n|---------|--------------|\n| \u003e2.0.0   | \u003e=3.x.x |\n| \u003c=2.0.0   | \u003c=2.x.x |\n\n## \u003ca name=\"requirements\"/\u003e Requirements\n\nTo use the Cloudimage Responsive plugin, you will need a\nCloudimage token to deliver your images over CDN. Don't worry, it only takes seconds to get one by\nregistering [here](https://www.cloudimage.io/en/register_page).\nOnce your token is created, you can configure it as described below.\nThis token allows you to use 25GB of image cache and 25GB of worldwide\nCDN traffic per month for free.\n\n## \u003ca name=\"installation\"\u003e\u003c/a\u003eStep 1: Installation\n\nusing npm\n\n```\n npm install vue-cloudimage-responsive-blur-hash vue-lazyload\n```\nor using yarn\n\n```\n yarn add vue-cloudimage-responsive-blur-hash vue-lazyload\n```\n\n## \u003ca name=\"initialize\"\u003e\u003c/a\u003eStep 2: Initialize\n\nAfter installing the vue-cloudimage-responsive-blur-hash lib, simply initialize it with your **token** and the **baseURL**\nof your image storage with **CloudImageProvider**:\ncreate vue instance a fle called main.js\n\n```js\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport VueLazyload from 'vue-lazyload';\n\nconst app = createApp(App);\n\napp.use(VueLazyload, {\n  lazyComponent: true\n});\n\napp.mount('#app');\n```\n\n```jsx\nimport Img, { CloudImageProvider } from 'vue-cloudimage-responsive-blur-hash';\n\nconst cloudimageConfig = {\n  token: 'demo',\n  baseURL: 'https://cdn.scaleflex.it/'\n};\n\n\u003ctemplate\u003e\n \u003cdiv id=\"app\"\u003e\n\u003cCloudImageProvider v-bind:cloudImageConfig=\"cloudimageConfig\"\u003e\n \u003ch1\u003eSimple demo of vue-cloudimage-responsive-blur-hash\u003c/h1\u003e\n\u003cImg src=\"img.jpg\" alt=\"Demo image\" v-bind:ratio=\"1.5\" blurhash=\"L34VB$Rj8wofayfPj@azDNj[.9WB\"/\u003e\n\u003c/CloudImageProvider\u003e\n\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default{\n  name: \"app\",\n  components: {\n    CloudImageProvider,\n    Img,\n  },\n  data() { \n    return { \n      cloudimageConfig\n    };\n  },\n},\n\u003c/script\u003e\n```\n\n## \u003ca name=\"implement\"\u003e\u003c/a\u003eStep 3: Implement it\n\n### Img component:\n\n```html\n\u003cImg src=\"img.jpg\" alt=\"Demo image\" ratio=\"1.5\"\nblurhash=\"L34VB$Rj8wofayfPj@azDNj[.9WB /\u003e\n```\n\nNOTE: \"ratio\" is recommended to prevent page layout jumping. The parameter is used to calculate image height to hold\nthe image position while image is loading.\n- you can also reference it with kabab-case : img\n\n\u003ca href=\"https://codesandbox.io/s/vue-cloudimage-responsive-blur-hash-example-jrh4e4\"\u003e\u003cimg src=\"https://codesandbox.io/static/img/play-codesandbox.svg\" alt=\"edeit in codesandbox\"/\u003e\u003c/a\u003e\n\n### BackgroundImg component:\n\n```html\n\u003cBackgroundImg src=\"img.jpg\" blurhash=\"L34VB$Rj8wofayfPj@azDNj[.9WB\"\u003e\n  {'Your conent...'}\n\u003c/BackgroundImg\u003e\n```\nNOTE: you can also reference it with kabab-case : background-img\n\n\u003ca href=\"https://codesandbox.io/s/vue-cloudimage-responsive-blur-hash-example-4xft68\"\u003e\u003cimg src=\"https://codesandbox.io/static/img/play-codesandbox.svg\" alt=\"edeit in codesandbox\"/\u003e\u003c/a\u003e\n\n## \u003ca name=\"configuration\"\u003e\u003c/a\u003e Config\n\n### token\n\n###### Type: **String** | Default: **\"demo\"** | _required_\n\nYour Cloudimage customer token.\n[Subscribe](https://www.cloudimage.io/en/register_page) for a\nCloudimage account to get one. The subscription takes less than a\nminute and is totally free.\n\n### customDomain\n\n###### Type: **String** | Default: **\"cloudimage.io\"** | _optional_\n\nIf you use a custom CNAME for your cloudimage integration, you can set it here.\nNote: this will disregard your token above as this should be built into the CNAME entry.\n\n### baseURL\n\n###### Type: **String** | Default: **\"/\"** | _optional_\n\nYour image folder on server, this alows to shorten your origin image URLs.\n\n### apiVersion\n\n###### Type: **String** |Default: **'v7'** | _optional_\n\nAllow to use a specific version of API.\n\n- set a specific version of API\n```javascript\nconst cloudimageConfig = {\n  token: 'demo',\n  baseURL: 'https://cdn.scaleflex.it/',\n  apiVersion: 'v7'                            // optional\n};\n```\n- disable API version\n```javascript\nconst cloudimageConfig = {\n  token: 'demo',\n  baseURL: 'https://cdn.scaleflex.it/',\n  apiVersion: null                            // optional\n};\n```\n\n### doNotReplaceURL\n\n###### Type: **bool** | Default: **false**\n\nIf set to **true** the plugin will only add query params to the given source of image.\n\n### \u003ca name=\"lazy_loading_config\"\u003e\u003c/a\u003elazyLoading\n\n###### Type: **Bool** | Default: **true** | _optional_\n\nOnly images close to the client's viewport will be loaded, hence accelerating the page loading time. The plugin uses\n[vue-lazyload](https://github.com/hilongjw/vue-lazyload) library to achieve it.\n\n### lazyLoadOffset\n\n###### Type: **Number/Array(Number)** | Default: **100**\n\nSay if you want to preload a component even if it's 100px below the viewport (user have to scroll 100px more to see this component), you can set offset props to 100. On the other hand, if you want to delay loading a component even if it's top edge has already appeared at viewport, set offset to negative number.\n\nLibrary supports horizontal lazy load out of the box. So when you provide this prop with number like 100 it will automatically set left edge offset to 100 and top edge to 100;\n\nIf you provide this prop with array like [100, 200], it will set left edge offset to 100 and top offset to 200.\n\n### params\n\n###### Type: **String** | Default: **'org_if_sml=1'** | _optional_\n\nApplies default Cloudimage operations/ filters to your image, e.g. brightness, contrast, rotation...\nMultiple params can be applied, separated by \"`\u0026`\" e.g. wat_scale=35\u0026wat_gravity=northeast\u0026wat_pad=10\u0026grey=1\n\n```javascript\nparams: 'org_if_sml=1';\n```\n\n#### alternative syntax: type: **Object**\n\n```javascript\nparams: {\n    org_if_sml: 1,\n    grey: 1,\n    ...\n}\n```\n\n[Full cloudimage v7 documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/introduction)\n\n### placeholderBackground\n\n###### Type: **String** | Default: **'#f4f4f4'** | _optional_\n\nPlaceholder colored background while the image is loading or use it to set your custom placeholder image or gif\n\nfor example\n\n`placeholderBackground: \"url('https://cdn.scaleflex.it/filerobot/red-loader.gif') 50% 50% no-repeat\"`\n\n### lowQualityPreview\n\n###### Type: **Object**\n\n- `lowQualityPreview.minImgWidth` number (default: 400) - minimal width of an image to load low quality preview image\n\nExample:\n\n```javascript\nparams: {\n    org_if_sml: 1,\n    grey: 1,\n    ...\n```\n\n### presets\n\n###### Type: **Object**\n\nDefault:\n\n```javascript\nconst cloudimageConfig = {\n  token: 'demo',\n  baseUrl: 'https://cdn.scaleflex.it/',\n  ...\n  presets: {\n      xs: '(max-width: 575px)', // up to 575    PHONE\n      sm: '(min-width: 576px)', // 576 - 767    PHABLET\n      md: '(min-width: 768px)', // 768 - 991    TABLET\n      lg: '(min-width: 992px)', // 992 - 1199   SMALL_LAPTOP_SCREEN\n      xl: '(min-width: 1200px)' // from 1200    USUALSCREEN\n  }\n};\n```\n\nBreakpoints shortcuts to use in image size property, can be overwridden.\n\n### limitFactor\n\n###### Type: **Number** | Default: **100** | _optional_\n\nRounds up size of an image to nearest limitFactor value.\n\nFor example\n\n- for an image with width **358px** and limitFactor equals **100** the plugin will round up to 400px\n- for an image with width **358px** and limitFactor equals **5** the plugin will round up to 360px\n\n### devicePixelRatioList\n\n###### Type: **[Number,...]** | Default: **[1, 1.5, 2]** | _optional_\n\nList of supported device pixel ratios. If there is no need to support retina devices, you should set empty array `devicePixelRatioList: []`\n\n### delay\n\n###### Type: **Number** | _optional_\n\nDelay for processing an image after rendering component.\n\n**NOTE:** normally the parameter is not needed, but in some cases with integrating third part libraries it can fix wrong\ncalculation of image container.\n\n### ImageSizeAttributes\n\n###### Type: **String** | possible values: 'use', 'ignore', 'take-ratio' | Default: **'use'** \n\nIf width and height attributes are set:\n\n**use** - width \u0026 height attributes values will be used to calculate image size (according to user's DPR) and **ratio**. \n\n**take-ratio** - width \u0026 height attributes values will be used only to calculate **ratio**.\n\n**ignore** - width \u0026 height attributes will be ignored.\n\nIf width and height attributes are NOT set, image container size will be detected to calculate result image size (according to user's DPR)\n\n*Note*: If only width or height attributes is set, ratio is going to be taken from ci-ratio image attribute\n\n## \u003ca name=\"image_properties\"\u003e\u003c/a\u003e Image properties\n\n### src\n\n###### Type: **String** | Default: **undefined** | _required_\n\nOriginal image hosted on your web server. You can use absolute path or\nrelative to baseUrl in your config.\n\n**NOTES:**\n\nThe plugin uses a special algorithm to detect the width of image container and set the image size accordingly.\nThis is the recommended way of using the Cloudimage Responsive plugin.\n### onImgLoad\n###### Type: **function** | Default: **undefined**\nA function to be executed after the image is loaded\n```jsx\n\u003cImg\n  src=\"dino-reichmuth-1.jpg\"\n  onImgLoad={(params)=\u003e{console.log(params);}}/\u003e\n```\n### width\n\n###### Type: **String** (e.g. 300px, 20vw) | Default: **undefined**\n\nIf it's set the plugin will use width as fixed value and change only according device pixel ratio.\n\n### height\n\n###### Type: **String** (e.g. 300px, 20vh) | Default: **undefined**\n\nIf it's set the plugin will use height as fixed value and change only according device pixel ratio.\n\n### params\n\n###### Type: **String** | Default: **undefined** | _optional_\n\nYou can apply any Cloudimage operations/ filters to your image, e.g. brightness, contrast, rotation...\nMultiple params can be applied, separated by \"`\u0026`\" e.g. **wat_scale=35\u0026wat_gravity=northeast\u0026wat_pad=10\u0026grey=1**\n\n```javascript\nparams = 'gray=1\u0026bright=10';\n```\n### doNotReplaceURL\n\n###### Type: **bool** | Default: **false**\n\nIf set to **true** the plugin will only add query params to the given source of image.\n\n#### alternative syntax: type: **Object**\n\n```javascript\nparams={{\n    bright: 10,\n    grey: 1,\n    ...\n}}\n```\n\n[Full cloudimage v7 documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/introduction)\n\n### sizes\n\n###### Type: **Object** | Default: **undefined**\n\n**{preset breakpoint (xs,sm, md,lg,xl) or media query + ' ' + image params}**:\nimageProps: **{ w, h, r, src }** where \n\n* **w** - width, \n* **h** - height, \n* **r** - ratio, \n* **src** - original image hosted on your web server. You can use absolute path or relative to the baseURL in your config.\n\n```jsx\n\u003cImg\n  src=\"dino-reichmuth-1.jpg\"\n  sizes=\"{\n     '(max-width: 575px)': { w: 400, h: 150 },\n     '(min-width): 576px)': { src: 'dino-reichmuth-square.jpg', r: 1 },\n     '(min-width: 620px)': { h: 560 },\n     '(min-width: 768px)': { w: '50vw' },\n     lg: { w: '55vw', h: 300 },\n     xl: { w: 1200 }\n }\"/\u003e\n```\n\nYou can drop some breakpoints, for example:\n\n```jsx\n\u003cImg\n  src=\"dino-reichmuth-1.jpg\"\n  sizes=\"{\n    sm: { w: 400, h: 200 },\n    '(min-width: 620px)': { w: 200, h: 60 }\n  }\"\n/\u003e\n```\n\n##### new experimental syntax\n\nmd: { w: '40vw', h: 350 } or md: { w: 250, h: '20vh' }\n\nadds possibility to use fixed height or width and change dynamically other dimension\n\n**NOTE:** if size is not set, the plugin uses a special algorithm to\ndetect the width of image container and set the image size accordingly. This is the recommended way of using the Cloudimage Responsive plugin.\n\n### ratio\n\n###### Type: **Number** | _optional_\n\nIt is recommended to prevent page layout jumping. The parameter is used to calculate image height to hold\nthe image position while image is loading.\n\n\nThe lazyLoad configuration to [LazyLoad](https://github.com/hilongjw/vue-lazyload#props) component.\n\nTo see the full cloudimage documentation [click here](https://docs.cloudimage.io/go/cloudimage-documentation)\n\n## \u003ca name=\"browser_support\"\u003e\u003c/a\u003eBrowser support\n\nTested in all modern browsers and IE 11.\n\n## \u003ca name=\"ui_family\"\u003e\u003c/a\u003eFilerobot UI Familiy\n\n- [JS Cloudimage Responsive](https://github.com/scaleflex/js-cloudimage-responsive)\n- [Angular Cloudimage Responsive](https://github.com/scaleflex/ng-cloudimage-responsive)\n- [JS Cloudimage 360 view](https://github.com/scaleflex/js-cloudimage-360-view)\n- [Image Editor](https://github.com/scaleflex/filerobot-image-editor)\n- [Uploader](https://github.com/scaleflex/filerobot-uploader)\n\n## \u003ca name=\"contributing\"\u003e\u003c/a\u003eContributing!\n\nAll contributions are super welcome!\n\n## \u003ca name=\"license\"\u003e\u003c/a\u003eLicense\n\nVue Cloudimage Responsive is provided under the [MIT License](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscaleflex%2Fvue-cloudimage-responsive-blur-hash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscaleflex%2Fvue-cloudimage-responsive-blur-hash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscaleflex%2Fvue-cloudimage-responsive-blur-hash/lists"}