VienDesu/vnshed
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: use background-image for image pickers

Browse source
This commit is contained in:
OleSTEEP 2025-10-16 19:05:13 +03:00
parent a3e78a43bc
commit b11333b7c6
1 changed files with 6 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/lib/components/image.svelte
View file

@ -3,13 +3,13 @@
let { direction = "horisontal", shape = "rounded", image = $bindable() } = $props(); let { direction = "horisontal", shape = "rounded", image = $bindable() } = $props();
let files = $state(); let files = $state();
let img_node = $state(); let img_src = $state();
$effect(() => { $effect(() => {
if (files.length > 0) { if (files.length > 0) {
const reader = new FileReader(); const reader = new FileReader();
reader.addEventListener("load", function () { reader.addEventListener("load", function () {
img_node.setAttribute("src", reader.result); img_src = reader.result;
}); });
reader.readAsDataURL(files[0]); reader.readAsDataURL(files[0]);
image = files[0]; image = files[0];
@ -17,9 +17,8 @@
}); });
</script> </script>
<div class="{direction} input img-div {shape}"> <div class="{direction} input img-div {shape}" style="background-image: url('{img_src}')">
<AddButton type="image" bind:files/> <AddButton type="image" bind:files/>
<img bind:this={img_node} src="" alt="">
</div> </div>
<style> <style>
@ -41,14 +40,8 @@
align-content: center; align-content: center;
text-align: center; text-align: center;
width: 11rem; width: 11rem;
} background-size: contain;
background-position: center;
:global(.img-div) img { background-repeat: no-repeat;
object-fit: cover;
width: 100%;
}
:global(.img-div) :global(.plus) {
z-index: 2;
} }
</style> </style>