You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
powered by [Cloudimage](https://www.cloudimage.io/)
71
-
([Watch the video here](https://www.youtube.com/watch?time_continue=2&v=JFZSE1vYb0k))
72
-
73
68
## Table of contents
74
69
75
70
-[Demo](#demo)
71
+
-[Responsive plugins family](#plugin_family)
76
72
-[Requirements](#requirements)
77
73
-[Step 1: Installation](#installation)
78
74
-[Step 2: Initialize](#initialize)
@@ -94,6 +90,28 @@ Inspector's Network tab to see how Cloudimage delivers the optimal
94
90
image size to your browser, hence accelerating the overall page
95
91
loading time.
96
92
93
+
## <aname="plugin_family"></a> Responsive plugins family
94
+
In 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.
@@ -169,7 +187,7 @@ NOTE: "ratio" is recommended to prevent page layout jumping. The parameter is us
169
187
the image position while image is loading.
170
188
- you can also reference it with kabab-case : img
171
189
172
-
<ahref="https://codesandbox.io/s/vue-cloudimage-resposnove-plain-example-2z2l7?file=/src/App.vue"><imgsrc="https://codesandbox.io/static/img/play-codesandbox.svg"alt="edit in codesandbox"/></a>
190
+
<ahref="https://codesandbox.io/s/vue-cloudimage-responsive-example-b64iq4"><imgsrc="https://codesandbox.io/static/img/play-codesandbox.svg"alt="edit in codesandbox"/></a>
173
191
174
192
### BackgroundImg component:
175
193
@@ -180,7 +198,7 @@ the image position while image is loading.
180
198
```
181
199
NOTE: you can also reference it with kabab-case : background-img
182
200
183
-
<ahref="https://codesandbox.io/s/vue-cloudimage-responsive-background-plain-ntdrm?file=/src/App.vue"><imgsrc="https://codesandbox.io/static/img/play-codesandbox.svg"alt="edit in codesandbox"/></a>
201
+
<ahref="https://codesandbox.io/s/vue-cloudimage-responsive-example-7dyqso"><imgsrc="https://codesandbox.io/static/img/play-codesandbox.svg"alt="edit in codesandbox"/></a>
184
202
185
203
## <aname="configuration"></a> Config
186
204
@@ -216,15 +234,15 @@ Allow to use a specific version of API.
216
234
```javascript
217
235
constcloudimageConfig= {
218
236
token:'demo',
219
-
baseURL:'https://jolipage.airstore.io/',
237
+
baseURL:'https://cdn.scaleflex.it/',
220
238
apiVersion:'v7'// optional
221
239
};
222
240
```
223
241
- disable API version
224
242
```javascript
225
243
constcloudimageConfig= {
226
244
token:'demo',
227
-
baseURL:'https://jolipage.airstore.io/',
245
+
baseURL:'https://cdn.scaleflex.it/',
228
246
apiVersion:null// optional
229
247
};
230
248
```
@@ -282,7 +300,7 @@ Placeholder colored background while the image is loading or use it to set your
Copy file name to clipboardExpand all lines: package.json
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
{
2
2
"name": "vue-cloudimage-responsive-plain",
3
-
"version": "1.3.4",
3
+
"version": "1.3.5",
4
4
"main": "dist/index.cjs.js",
5
5
"module": "dist/index.es.js",
6
6
"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 blur hash placeholder.",
@@ -36,7 +36,7 @@
36
36
"publish-demo": "npm run build-demo && npm run deploy"
0 commit comments