alexstaroselsky / svelte-lazy-image Goto Github PK
View Code? Open in Web Editor NEWSvelte action and component to lazy load an image
Home Page: https://alexstaroselsky.github.io/svelte-lazy-image/
License: MIT License
Svelte action and component to lazy load an image
Home Page: https://alexstaroselsky.github.io/svelte-lazy-image/
License: MIT License
Hi dear maintainer,
it seems this project does not have an explicit licence. By default, this means that nobody would be allowed to use the project as it is your copyright. Would you mind adding one to make this explicit?
Best regards,
Would be great to have typescript definitions, now that Svelte has first class support for typescript
Hi there,
Thanks for this awesome package that you created.
Now when I use this package like this :
<script lang='ts'>
import { LazyImage } from 'svelte-lazy-image';
</script>
<LazyImage
src="https://via.placeholder.com/250?text=src"
placeholder="https://via.placeholder.com/250?text=placeholder"
alt="Lorem Ipsum"
options={{ threshold: 0.5 }}
/>
I get this error :
Type '{ threshold: number; }' is missing the following properties from type '{ root: any; rootMargin: string; threshold: number; }': root, rootMargin
So i think the correct types should be,
export default class LazyImage extends SvelteComponentTyped<{
[x: string]: any;
placeholder: string;
src: string;
alt: string;
options?: {
root?: any;
rootMargin?: string;
threshold?: number;
};
}, {
[evt: string]: CustomEvent<any>;
}, {}> {
}
Where the types in current version is :
export default class LazyImage extends SvelteComponentTyped<{
[x: string]: any;
placeholder: string;
src: string;
alt: string;
options?: {
root: any;
rootMargin: string;
threshold: number;
};
}, {
[evt: string]: CustomEvent<any>;
}, {}> {
}
So I created my Repo fixing this Issue. Should I submit a Pull Request ?
It would be great if svelte-lazy-image
either forwarded all props given to to the underlying <img>
element (ie: <img {...$$props} />
, or had props for all standard img
attributes. Currently it's not possible to (for example) use responsive images with sizes
and srcset
.
Missing props:
srcset
sizes
width
height
loading
class
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.