svelte-img-previewer v0.0.6
About
svelte-img-previewer
is a tool for displaying images from input file types in svelte.
<input type="file" target="images/*" />
Getting Started
npm install svelte-img-previewer
Import and invoke the createImagePreviewer()
builder.
The builder will create and return an object which contains a store and an action which you attach to an input file type.
store:
src
: current image source stateaction:
trigger
: invokes a click event on the inputimagePreviewer
is being usedaction:
imagePreviewer
: updates the state of thesrc
store oninput
event
You can optionally pass an initial state when calling the createImagePreviewer
builder.
If you dont have an initial state to pass the createImagePreviewer
the src
store will have a null value. In this case you should conditionally render your image component / element.
Usage
<script>
import { createImagePreviewer } from 'svelte-img-previewer';
const avatar = 'https://avatars.githubusercontent.com/u/130720776?v=4'
const { src, trigger, imagePreviewer } = createImagePreviewer(avatar);
</script>
<div>
{#if $src}
<img src={$src} alt="user avatar" />
{/if}
</div>
<button use:trigger> Upload Image </button>
<input name="avatar" hidden type="file" accept="image/*" use:imagePreviewer />
<style>
div {
height: 100px;
width: 100px;
border: 2px solid black;
margin-block-end: 10px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>