svelte-remote-image 0.3.0 → 0.3.1

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.
Files changed (4) hide show
  1. package/README.md +29 -30
  2. package/dist/components/Img.svelte +2 -2
  3. package/dist/components/type.d.ts +1 -1
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -21,13 +21,15 @@ $ npm i svelte-remote-image
21
21
  And import components and types.
22
22
 
23
23
  ```
24
- import { Image, type ImageSrc } from "svelte-remote-image";
24
+ import { Img, Picture, type ImgSrc, type PictureSrc } from "svelte-remote-image";
25
25
  ```
26
26
 
27
27
  ## How to use
28
28
 
29
29
  Sample code.
30
30
 
31
+ ### Img
32
+
31
33
  ```
32
34
  <script lang="ts">
33
35
  import { Image, type ImageSrc } from "svelte-remote-image";
@@ -36,46 +38,39 @@ Sample code.
36
38
  const optimazerPrefix = 'https://nostr-image-optimizer.ocknamo.com/image/';
37
39
  const originalImageUrl = 'https://ocknamo.com/static/b84d6366deec053ff3fa77df01a54464/dccd3/cat.webp'
38
40
 
39
- let src: ImageSrc = {
40
- w: 800,
41
- img: `${optimazerPrefix}width=1600,quality=70,format=webp/${originalImageUrl}`,
42
- webp: [
43
- { src: `${optimazerPrefix}width=1600,quality=50,format=webp/${originalImageUrl}`, w: 1600 },
44
- { src: `${optimazerPrefix}width=800,quality=50,format=webp/${originalImageUrl}`, w: 800 }
45
- ],
46
- jpeg: [
47
- { src: `${optimazerPrefix}width=1600,quality=50,format=jpeg/${originalImageUrl}`, w: 1600 },
48
- { src: `${optimazerPrefix}width=800,quality=50,format=jpeg/${originalImageUrl}`, w: 800 }
49
- ],
50
- fallback: originalImageUrl,
51
- alt: 'blog top',
52
- placeholder: { dataUri: '', color: '#c5c5c5' },
53
- blur: true
54
- };
41
+ const imgSrc: ImgSrc = {
42
+ w: 800,
43
+ img: `https://ocknamo.com/cat.jpg`,
44
+ srssets: [
45
+ {
46
+ src: `https://ocknamo.com/cat_1600.jpg`,
47
+ w: 1600,
48
+ },
49
+ {
50
+ src: `https://ocknamo.com/cat_800.jpg`,
51
+ w: 800,
52
+ },
53
+ ],
54
+ fallback: ['https://ocknamo.com/cat_fallback.jpg'],
55
+ }
55
56
  </script>
56
57
 
57
- <Image {src} />
58
+ <Img src={imgSrc} style='max-width: 400px; max-width: 80%;' />
58
59
  ```
59
60
 
60
61
  The image component renders into:
61
62
 
62
63
  ```
63
- <picture>
64
- <source
65
- srcset="https://nostr-image-optimizer.ocknamo.com/image/width=1600,quality=50,format=webp/https://ocknamo.com/static/b84d6366deec053ff3fa77df01a54464/dccd3/cat.webp 1600w, https://nostr-image-optimizer.ocknamo.com/image/width=800,quality=50,format=webp/https://ocknamo.com/static/b84d6366deec053ff3fa77df01a54464/dccd3/cat.webp 800w"
66
- type="image/webp">
67
- <source
68
- srcset="https://nostr-image-optimizer.ocknamo.com/image/width=1600,quality=50,format=jpeg/https://ocknamo.com/static/b84d6366deec053ff3fa77df01a54464/dccd3/cat.webp 1600w, https://nostr-image-optimizer.ocknamo.com/image/width=800,quality=50,format=jpeg/https://ocknamo.com/static/b84d6366deec053ff3fa77df01a54464/dccd3/cat.webp 800w"
69
- type="image/jpeg"> <img width="800"
70
- style="max-width: 100%; background-color: '#c5c5c5'; display: inline;"
71
- class="image-blur-loaded"
72
- src="https://nostr-image-optimizer.ocknamo.com/image/width=1600,quality=70,format=webp/https://ocknamo.com/static/b84d6366deec053ff3fa77df01a54464/dccd3/cat.webp"
73
- alt="blog top" loading="lazy">
74
- </picture>
64
+ <img id="svelte-remote-image--6188058" width="800" style="max-width: 80%; visibility: hidden;"
65
+ src="https://ocknamo.com/cat_fallback.jpg" srcset="" alt="" title="" loading="lazy" class="s-6LbhuE7J5MgN">
75
66
  ```
76
67
 
77
68
  Inspired by [svelte-img](https://github.com/zerodevx/svelte-img?tab=readme-ov-file#remote-images-from-an-api).
78
69
 
70
+ ### Picture
71
+
72
+ TBD
73
+
79
74
  ## Config
80
75
 
81
76
  ### ImageSrc
@@ -92,6 +87,10 @@ Image width.
92
87
 
93
88
  Image height.
94
89
 
90
+ #### srssets: Srcset[]
91
+
92
+ Image sources for Img component.
93
+
95
94
  #### webp?: Srcset[]
96
95
 
97
96
  Image sources for webp.
package/dist/components/Img.svelte CHANGED
@@ -44,7 +44,7 @@ const handleImgError = (e) => {
44
44
  src = {
45
45
  ...src,
46
46
  img: fallbackUrl,
47
- srssets: []
47
+ srcsets: []
48
48
  };
49
49
  };
50
50
  const handleLoaded = (e) => {
@@ -59,7 +59,7 @@ const handleLoaded = (e) => {
59
59
  height={src.h}
60
60
  {style}
61
61
  src={src.img}
62
- srcset={src.srssets.map((s) => `${s.src} ${s.w}w`).join(', ')}
62
+ srcset={src.srcsets ? src.srcsets.map((s) => `${s.src} ${s.w}w`).join(', ') : ''}
63
63
  alt={alt}
64
64
  title={title}
65
65
  on:error={handleImgError}
package/dist/components/type.d.ts CHANGED
@@ -18,7 +18,7 @@ export interface PictureSrc {
18
18
  }
19
19
  export interface ImgSrc {
20
20
  img: string;
21
- srssets: Srcset[];
21
+ srcsets?: Srcset[];
22
22
  w?: number;
23
23
  h?: number;
24
24
  fallback?: string[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svelte-remote-image",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "license": "MIT",
5
5
  "homepage": "https://github.com/ocknamo/svelte-remote-image",
6
6
  "scripts": {