svelte-remote-image 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +66 -8
- package/dist/index.d.ts +3 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,17 +2,38 @@
|
|
|
2
2
|
|
|
3
3
|
[demo](https://svelte-remote-image.pages.dev/)
|
|
4
4
|
|
|
5
|
-
Display optimized
|
|
5
|
+
Display optimized, responsive and progressive images for Svelte.
|
|
6
|
+
With remote image URL of CDN or other means.
|
|
7
|
+
|
|
8
|
+
- Fade-in and blur on image reveal.
|
|
9
|
+
- An image URL can be set to failback if an image cannot be retrieved from the source URL due to an error.
|
|
10
|
+
- A pre-rendered low-quality dataURI can be set as a placeholder.
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
Install the package.
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
$ npm i svelte-remote-image
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
And import components and types.
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
import { Image, type ImageSrc } from "svelte-remote-image";
|
|
25
|
+
```
|
|
6
26
|
|
|
7
27
|
## How to use
|
|
8
28
|
|
|
29
|
+
Sample code.
|
|
30
|
+
|
|
9
31
|
```
|
|
10
32
|
<script lang="ts">
|
|
11
|
-
|
|
12
|
-
import { Image } from "svelte-remote-image";
|
|
33
|
+
import { Image, type ImageSrc } from "svelte-remote-image";
|
|
13
34
|
|
|
14
35
|
// CDN URL
|
|
15
|
-
|
|
36
|
+
const optimazerPrefix = 'https://nostr-image-optimizer.ocknamo.com/image/';
|
|
16
37
|
const originalImageUrl = 'https://ocknamo.com/static/b84d6366deec053ff3fa77df01a54464/dccd3/cat.webp'
|
|
17
38
|
|
|
18
39
|
let src: ImageSrc = {
|
|
@@ -33,9 +54,6 @@ Display optimized images using CDN or other means.
|
|
|
33
54
|
};
|
|
34
55
|
</script>
|
|
35
56
|
|
|
36
|
-
<h1>Welcome to Svelte Remote Image</h1>
|
|
37
|
-
<p>Display optimized images using CDN or other means.</p>
|
|
38
|
-
|
|
39
57
|
<Image {src} />
|
|
40
58
|
```
|
|
41
59
|
|
|
@@ -62,9 +80,49 @@ The image component renders into:
|
|
|
62
80
|
}
|
|
63
81
|
```
|
|
64
82
|
|
|
65
|
-
|
|
66
83
|
Inspired by [svelte-img](https://github.com/zerodevx/svelte-img?tab=readme-ov-file#remote-images-from-an-api).
|
|
67
84
|
|
|
85
|
+
## Config
|
|
86
|
+
|
|
87
|
+
### ImageSrc
|
|
88
|
+
|
|
89
|
+
- img: string
|
|
90
|
+
- image url.
|
|
91
|
+
|
|
92
|
+
- w: number
|
|
93
|
+
- image width.
|
|
94
|
+
|
|
95
|
+
- h?: number
|
|
96
|
+
- image height.
|
|
97
|
+
|
|
98
|
+
- webp?: Srcset[]
|
|
99
|
+
- image source for webp.
|
|
100
|
+
|
|
101
|
+
- jpeg?: Srcset[]
|
|
102
|
+
- image source for jpeg.
|
|
103
|
+
|
|
104
|
+
- png?: Srcset[]
|
|
105
|
+
- image source for png.
|
|
106
|
+
|
|
107
|
+
- failback: string
|
|
108
|
+
- failback image url.
|
|
109
|
+
|
|
110
|
+
- alt: string
|
|
111
|
+
- alt
|
|
112
|
+
|
|
113
|
+
- placeholder?: { dataUri?: string; color?: string }
|
|
114
|
+
- Image data and background color for fastest display.
|
|
115
|
+
|
|
116
|
+
- blur?: boolean
|
|
117
|
+
- Whether to use the blur effect when displaying the image.
|
|
118
|
+
|
|
119
|
+
### Srcset
|
|
120
|
+
|
|
121
|
+
- src: string
|
|
122
|
+
- Image URL.
|
|
123
|
+
- w: number
|
|
124
|
+
- width to display.
|
|
125
|
+
|
|
68
126
|
## Developing
|
|
69
127
|
|
|
70
128
|
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
package/dist/index.d.ts
CHANGED