Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/metonym/svelte-img
Responsive image loading component
https://github.com/metonym/svelte-img
aspect-ratio fluid image img loading placeholder responsive
Last synced: about 1 month ago
JSON representation
Responsive image loading component
- Host: GitHub
- URL: https://github.com/metonym/svelte-img
- Owner: metonym
- License: mit
- Created: 2020-04-20T14:54:35.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-11T04:21:05.000Z (over 1 year ago)
- Last Synced: 2024-10-08T07:58:11.420Z (about 1 month ago)
- Topics: aspect-ratio, fluid, image, img, loading, placeholder, responsive
- Language: Svelte
- Homepage: https://metonym.github.io/svelte-img/
- Size: 302 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-img
[![NPM][npm]][npm-url]
> Responsive image loading component for Svelte.
This component fades in an image when loaded.
Even with JavaScript disabled, an image can still be loaded without resorting to the `noscript` tag.
---
## Installation
**Yarn**
```bash
yarn add -D svelte-img
```
**NPM**
```bash
npm i -D svelte-img
```
## Usage
### Basic
```svelte
import Img from "svelte-img";
import { tick } from "svelte";
let url =
"https://upload.wikimedia.org/wikipedia/commons/a/a8/Nighthawks_by_Edward_Hopper_1942.jpg";
let src = url;
![Nighthawks, 1942 painting by Edward Hopper]()
Loading...
An error occurred.
{
src = undefined;
tick().then(() => (src = url));
}}
>
Reload
(src = url + "1")}>
Simulate error
```
### Responsive placeholder
The component maintains a fluid aspect ratio to avoid [layout jank](https://css-tricks.com/the-fight-against-layout-jank/).
Specify the aspect ratio (width x height) of the image using the `ratio` prop.
For example, an image ratio that has a width of 800px and height of 437px would be `800x437`.
```svelte
```
### Slots
Loading and error states can be displayed using named slots.
```html
Loading...
An error occurred.
```
## API
### Props
| Prop name | Type | Default value |
| :-------------- | :------- | :------------ |
| src | `string` | `undefined` |
| alt | `string` | `""` |
| ratio | `string` | `"16x9"` |
| backgroundColor | `string` | `"#f4f4f4"` |
### Dispatched events
- **on:load**: fired when the image is loaded
- **on:error**: fired if an error occurs
### Forwarded events
The following events are forwarded to the `img` element.
- on:click
- on:mouseover
- on:mouseenter
- on:mouseout
## TypeScript
Svelte version 3.31 or greater is required to use this component with TypeScript.
TypeScript definitions are located in the [types folder](./types).
## Changelog
[Changelog](CHANGELOG.md)
## License
[MIT](LICENSE)
[npm]: https://img.shields.io/npm/v/svelte-img.svg?color=blue&style=for-the-badge
[npm-url]: https://npmjs.com/package/svelte-img
