Skip to content

Commit 7f47a3f

Browse files
ANKUR DWIVEDIANKUR DWIVEDI
ANKUR DWIVEDI
authored and
ANKUR DWIVEDI
committed
remove unrelated changes
1 parent a604d64 commit 7f47a3f

File tree

2 files changed

+64
-174
lines changed

2 files changed

+64
-174
lines changed

‎README.md‎

Lines changed: 63 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -87,88 +87,11 @@ yarn add imagekitio-vue
8787
### Initialization
8888
Import components in your code:
8989
```js
90-
import ImageKit, { IKImage, IKUpload, IKContext, IKVideo, } from 'imagekitio-vue'
91-
import { createApp } from 'vue';
92-
93-
const app = createApp({});
94-
95-
app.use(ImageKit, {
96-
urlEndpoint: "your_url_endpoint", // Required. Default URL-endpoint is https://ik.imagekit.io/your_imagekit_id
97-
publicKey: "your_public_api_key", // optional
98-
// transformationPosition: "path" // optional
99-
})
100-
101-
export default {
102-
components: {
103-
IKImage,
104-
IKVideo,
105-
IKContext,
106-
IKUpload
107-
}
108-
}
109-
90+
import { IKImage, IKUpload, IKContext, IKVideo, } from 'imagekitio-vue'
11091
```
111-
`urlEndpoint` is required to use the SDK. You can get URL-endpoint from your ImageKit dashboard - https://imagekit.io/dashboard#url-endpoints.
112-
113-
`publicKey` and `authenticator` parameters are required if you want to use the SDK for client-side file upload. You can get these parameters from the developer section in your ImageKit dashboard - https://imagekit.io/dashboard#developers.
114-
115-
`transformationPosition` is optional. The default value for this parameter is `path`. Acceptable values are `path` & `query`
116-
117-
_Note: Do not include your Private Key in any client-side code, including this SDK or its initialization. If you pass the `privateKey` parameter while initializing this SDK, it throws an error_
11892

11993
### Quick examples
12094
```js
121-
// Rendering image using a relative file path
122-
<IKImage
123-
path="/default-image.jpg"
124-
/>
125-
126-
// Image resizing
127-
<IKImage
128-
path="/default-image.jpg"
129-
:transformation="[{height:300,width:400}]"
130-
/>
131-
132-
// Using chained transformation
133-
<IKImage
134-
path="/default-image.jpg"
135-
:transformation="[{height:300,width:400}, {rotation:90}]"
136-
/>
137-
138-
// Imgae from absolute file path
139-
<IKImage
140-
src="https://custom-domain.com/default-image.jpg"
141-
:transformation="[{height:300,width:400}, {rotation:90}]"
142-
/>
143-
144-
// Lazy loading
145-
<IKImage
146-
path="/default-image.jpg"
147-
:transformation="[{height:300,width:400},{rotation:90}]"
148-
loading="lazy"
149-
height="300"
150-
width="400"
151-
/>
152-
153-
// Low-quality blurred image placeholder of original image
154-
<IKImage
155-
path="/default-image.jpg"
156-
:lqip="{active:true}"
157-
:transformation="[{height:300,width:400},{rotation:90}]"
158-
loading="lazy"
159-
height="300"
160-
width="400"
161-
/>
162-
163-
// Controlling quality and blur value of placeholder image
164-
<IKImage
165-
path="/default-image.jpg"
166-
:lqip="{active:true, quality:30, blur: 5}" // default values are quality=20 and blur=6
167-
:transformation="[{height:300,width:400},{rotation:90}]"
168-
loading="lazy"
169-
height="300"
170-
width="400"
171-
/>
17295

17396
<IKContext urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
17497
// Render an image using a relative path - https://ik.imagekit.io/your_imagekit_id/default-image.jpg
@@ -239,17 +162,17 @@ _Note: Do not include your Private Key in any client-side code, including this S
239162
/>
240163
</IKContext>
241164

242-
// File upload
243-
<IKUpload
244-
:tags="['tag1','tag2']"
245-
:responseFields="['tags']"
246-
:onError="onError"
247-
:onSuccess="onSuccess"
248-
:useUniqueFileName=true
249-
:isPrivateFile=false
250-
customCoordinates="10,10,100,100"
251-
/>
252-
165+
166+
// Controlling quality and blur value of placeholder image
167+
<IKImage
168+
urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
169+
path="/default-image.jpg"
170+
:lqip="{active:true, quality:30, blur: 5}" // default values are quality=20 and blur=6
171+
:transformation="[{height:300,width:400},{rotation:90}]"
172+
loading="lazy"
173+
height="300"
174+
width="400"
175+
/>
253176
// This promise resolves with an object containing the necessary security parameters i.e `signature`, `token`, and `expire`.
254177
<IKContext publicKey="your_public_api_key" :authenticator="()=>Promise">
255178
// Simple file upload and response handling
@@ -279,7 +202,7 @@ _Note: Do not include your Private Key in any client-side code, including this S
279202

280203
### Components
281204

282-
This SDK provides 4 components, when registered as a plugin:
205+
This SDK provides 4 components:
283206
* [`IKContext`](#IKContext) for defining options like `urlEndpoint`, `publicKey` or `authenticator` to all children elements. This component does not render anything.
284207
* `IKImage` for [image resizing](#image-resizing). This renders a `<img>` tag.
285208
* `IKVideo` for [video resizing](#video-resizing). This renders a `<video>` tag.
@@ -312,22 +235,6 @@ var imageURL = imagekit.url({
312235
In order to use the SDK, you need to provide it with a few configuration parameters. You can use a parent `IKContext` component to define common options for all children `IKImage`, `IKVideo` or `IKupload` compoents. For example:
313236

314237
```js
315-
// Register as plugin
316-
import ImageKit from "imagekitio-vue"
317-
import { createApp } from 'vue';
318-
319-
const app = createApp({});
320-
321-
app.use(ImageKit, {
322-
urlEndpoint: "https://ik.imagekit.io/your_imagekit_id",
323-
})
324-
325-
// Using global configuration
326-
// https://ik.imagekit.io/your_imagekit_id/default-image.jpg
327-
<IKImage
328-
path="/default-image.jpg"/>
329-
330-
331238
<IKContext
332239
:publicKey="your_url_endpoint"
333240
:urlEndpoint="your_public_api_key"
@@ -343,13 +250,21 @@ app.use(ImageKit, {
343250
</IKContext>
344251
```
345252

253+
`urlEndpoint` is required to use the SDK. You can get URL-endpoint from your ImageKit dashboard - https://imagekit.io/dashboard#url-endpoints.
254+
255+
`publicKey` and `authenticator` parameters are required if you want to use the SDK for client-side file upload. You can get these parameters from the developer section in your ImageKit dashboard - https://imagekit.io/dashboard#developers.
256+
257+
`transformationPosition` is optional. The default value for this parameter is `path`. Acceptable values are `path` & `query`
258+
259+
_Note: Do not include your Private Key in any client-side code, including this SDK or its initialization. If you pass the `privateKey` parameter while initializing this SDK, it throws an error_
260+
346261
## Image resizing
347262

348263
The `IKImage` component renders an `img` tag. It is used for rendering and manipulating images in real time. `IKImage` component accepts the following props:
349264

350265
| Prop | Type | Description |
351266
| :----------------| :----|:----------------------------- |
352-
| urlEndpoint | String | Optional. The base URL to be appended before the path of the image. If not specified, the URL-endpoint specified at the time of [SDK initialization](#initialization) is used. For example, https://ik.imagekit.io/your_imagekit_id/endpoint/ |
267+
| urlEndpoint | String | Optional. The base URL to be appended before the path of the image. If not specified, the URL-endpoint specified in the parent `IKContext` component is used. For example, https://ik.imagekit.io/your_imagekit_id/endpoint/ |
353268
| path | String |Conditional. This is the path at which the image exists. For example, `/path/to/image.jpg`. Either the `path` or `src` parameter needs to be specified for URL generation. |
354269
| src | String |Conditional. This is the complete URL of an image already mapped to ImageKit. For example, `https://ik.imagekit.io/your_imagekit_id/endpoint/path/to/image.jpg`. Either the `path` or `src` parameter needs to be specified for URL generation. |
355270
| transformation | Array of objects |Optional. An array of objects specifying the transformation to be applied in the URL. The transformation name and the value should be specified as a key-value pair in the object. See list of [different tranformations](#list-of-supported-transformations). Different steps of a [chained transformation](https://docs.imagekit.io/features/image-transformations/chained-transformations) can be specified as the array's different objects. The complete list of supported transformations in the SDK and some examples of using them are given later. If you use a transformation name that is not specified in the SDK, it is applied in the URL as it is. |
@@ -362,26 +277,28 @@ The `IKImage` component renders an `img` tag. It is used for rendering and manip
362277

363278
```js
364279
// Image from related file path with no transformations - https://ik.imagekit.io/your_imagekit_id/default-image.jpg
365-
<IKImage
366-
path="/default-image.jpg"
367-
/>
280+
<IKContext urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
281+
<IKImage
282+
path="/default-image.jpg"
283+
/>
368284

369-
// Image resizing - https://ik.imagekit.io/your_imagekit_id/tr:w-h-300,w-400/default-image.jpg
370-
<IKImage
371-
path="/default-image.jpg"
372-
:transformation="[{height:300,width:400}]"
373-
/>
285+
// Image resizing - https://ik.imagekit.io/your_imagekit_id/tr:w-h-300,w-400/default-image.jpg
286+
<IKImage
287+
path="/default-image.jpg"
288+
:transformation="[{height:300,width:400}]"
289+
/>
374290

375-
// Loading imgae from an absolute file path with no transformations - https://www.custom-domain.com/default-image.jpg
376-
<IKImage
377-
src="https://www.custom-domain.com/default-image.jpg"
378-
/>
291+
// Loading imgae from an absolute file path with no transformations - https://www.custom-domain.com/default-image.jpg
292+
<IKImage
293+
src="https://www.custom-domain.com/default-image.jpg"
294+
/>
379295

380-
// Using a new tranformation parameter which is not there in this SDK yet - https://ik.imagekit.io/your_imagekit_id/tr:custom-value/default-image.jpg
381-
<IKImage
382-
path="/default-image.jpg"
383-
:transformation="[{custom: 'value'}]"
384-
/>
296+
// Using a new tranformation parameter which is not there in this SDK yet - https://ik.imagekit.io/your_imagekit_id/tr:custom-value/default-image.jpg
297+
<IKImage
298+
path="/default-image.jpg"
299+
:transformation="[{custom: 'value'}]"
300+
/>
301+
</IKContext>
385302
```
386303

387304
The `transformation` prop is an array of objects. Each object can have the following properties. When you specify more than one object, each object is added as a chained transformation. For example:
@@ -503,6 +420,7 @@ Example usage:
503420
```js
504421
// Lazy loading images
505422
<IKImage
423+
urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
506424
path="/default-image.jpg"
507425
:transformation="[{height:300,width:400},{rotation:90}]"
508426
loading="lazy"
@@ -517,6 +435,7 @@ To improve user experience, you can use a low-quality blurred variant of the ori
517435
```js
518436
// Loading a blurred low quality image placeholder while the original image is being loaded
519437
<IKImage
438+
urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
520439
path="/default-image.jpg"
521440
:lqip="{active:true}"
522441
/>
@@ -526,6 +445,7 @@ By default, the SDK uses the `quality:20` and `blur:6`. You can change this. For
526445

527446
```js
528447
<IKImage
448+
urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
529449
path="/default-image.jpg"
530450
:lqip="{active:true, quality: 40, blur: 5}"
531451
/>
@@ -537,6 +457,7 @@ You have the option to lazy-load the original image only when the user scrolls n
537457
```js
538458
// Loading a blurred low quality image placeholder and lazy-loading original when user scrolls near them
539459
<IKImage
460+
urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
540461
path="/default-image.jpg"
541462
:transformation="[{height:300,width:400},{rotation:90}]"
542463
:lqip="{active:true}"
@@ -549,29 +470,22 @@ You have the option to lazy-load the original image only when the user scrolls n
549470
### Overriding urlEndpoint for a particular image
550471
You can use `urlEndpoint` prop in an individual `IKImage` to change url for that image. For example:
551472
```js
552-
import ImageKit from "imagekitio-vue"
553-
import { createApp } from 'vue';
554-
555-
const app = createApp({});
556-
557-
app.use(ImageKit, {
558-
urlEndpoint: "https://ik.imagekit.io/your_imagekit_id"
559-
})
560-
561-
// Changing urlEndpoint
562-
// https://www.custom-domain.com/tr:w-400,h-300/default-image.jpg
563-
<IKImage
564-
path="/default-image.jpg"
565-
:transformation="[{height:300,width:400}]"
566-
urlEndpoint="https://www.custom-domain.com"
567-
/>
473+
<IKContext urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
474+
// Changing urlEndpoint
475+
// https://www.custom-domain.com/tr:w-400,h-300/default-image.jpg
476+
<IKImage
477+
path="/default-image.jpg"
478+
:transformation="[{height:300,width:400}]"
479+
urlEndpoint="https://www.custom-domain.com"
480+
/>
568481

569-
// Without urlEndpoint
570-
// https://ik.imagekit.io/your_imagekit_id/tr:w-400,h-300/default-image.jpg
571-
<IKImage
572-
path="/default-image.jpg"
573-
:transformation="[{height:300,width:400}]"
574-
/>
482+
// Without urlEndpoint
483+
// https://ik.imagekit.io/your_imagekit_id/tr:w-400,h-300/default-image.jpg
484+
<IKImage
485+
path="/default-image.jpg"
486+
:transformation="[{height:300,width:400}]"
487+
/>
488+
</IKContext>
575489
```
576490

577491
## Video resizing
@@ -656,9 +570,9 @@ The SDK provides the `IKUpload` component to upload files to the [ImageKit Media
656570
| validateFile | Function callback | Optional. Called before the upload is started to run custom validation. The first and only argument is the file selected for upload. If the callback returns `true`, the upload is allowed to continue. But, if it returns `false`, the upload is not done |
657571
| onSuccess | Function callback | Optional. Called if the upload is successful. The first and only argument is the response JSON from the upload API. The request-id, response headers, and HTTP status code are also accessible using the $ResponseMetadata key that is exposed from the [javascript sdk](https://github.com/imagekit-developer/imagekit-javascript#access-request-id-other-response-headers-and-http-status-code) |
658572
| onError | Function callback | Optional. Called if upload results in an error. The first and only argument is the error received from the upload API |
659-
| urlEndpoint | String | Optional. If not specified, the URL-endpoint specified at the time of [SDK initialization](#initialization) is used. For example, https://ik.imagekit.io/your_imagekit_id/endpoint/ |
660-
| publicKey | String | Optional. If not specified, the `publicKey` specified at the time of [SDK initialization](#initialization) is used.|
661-
| authenticator | ()=>Promise<{signature:string,token:string,expiry:number}> | Optional. If not specified, the `authenticator` specified at the time of [SDK initialization](#initialization) is used. |
573+
| urlEndpoint | String | Optional. If not specified, the URL-endpoint specified in the parent `IKContext` component is used. For example, https://ik.imagekit.io/your_imagekit_id/endpoint/ |
574+
| publicKey | String | Optional. If not specified, the `publicKey` specified in the parent `IKContext` component is used.|
575+
| authenticator | ()=>Promise<{signature:string,token:string,expiry:number}> | Optional. If not specified, the `authenticator` specified in the parent `IKContext` component is used. |
662576

663577
> Make sure that you have specified authenticator and publicKey in IKUpload or in the parent IKContext component as a prop. The authenticator expects an asynchronous function that resolves with an object containing the necessary security parameters i.e signature, token, and expire.
664578
@@ -679,14 +593,6 @@ Sample file upload:
679593

680594
<script>
681595
import { IKUpload } from "imagekitio-vue"
682-
import { createApp } from 'vue';
683-
684-
const app = createApp({});
685-
686-
app.use(ImageKit, {
687-
urlEndpoint: "your_url_endpoint", // Required. Default URL-endpoint is https://ik.imagekit.io/your_imagekit_id
688-
publicKey: "your_public_api_key", // optional
689-
})
690596

691597
export default {
692598
name: "app",
@@ -738,14 +644,6 @@ Example Usage
738644

739645
<script>
740646
import { IKUpload } from "imagekitio-vue"
741-
import { createApp } from 'vue';
742-
743-
const app = createApp({});
744-
745-
app.use(ImageKit, {
746-
urlEndpoint: "your_url_endpoint", // Required. Default URL-endpoint is https://ik.imagekit.io/your_imagekit_id
747-
publicKey: "your_public_api_key", // optional
748-
})
749647

750648
export default {
751649
name: "app",

‎tests/test-app/src/App.vue‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -108,15 +108,7 @@
108108

109109
<script>
110110
111-
import ImageKit, { IKImage, IKUpload, IKContext, IKVideo, } from 'imagekitio-vue'
112-
import { createApp } from 'vue';
113-
114-
const app = createApp({});
115-
116-
app.use(ImageKit, {
117-
urlEndpoint: process.env.VUE_APP_URL_ENDPOINT,
118-
publicKey: process.env.VUE_APP_PUBLIC_KEY,
119-
})
111+
import { IKImage, IKUpload, IKContext, IKVideo, } from 'imagekitio-vue'
120112
121113
let path = "/default-image.jpg";
122114

0 commit comments

Comments
 (0)