47 lines
1.2 KiB
Svelte
47 lines
1.2 KiB
Svelte
<script>
|
|
import AddButton from "./add_button.svelte";
|
|
|
|
let { direction = "horisontal", shape = "rounded", image = $bindable() } = $props();
|
|
let files = $state();
|
|
let img_src = $state();
|
|
|
|
$effect(() => {
|
|
if (files.length > 0) {
|
|
const reader = new FileReader();
|
|
reader.addEventListener("load", function () {
|
|
img_src = reader.result;
|
|
});
|
|
reader.readAsDataURL(files[0]);
|
|
image = files[0];
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="{direction} input img-div {shape}" style="background-image: url('{img_src}')">
|
|
<AddButton type="image" bind:files/>
|
|
</div>
|
|
|
|
<style>
|
|
/* Вертикальное изображение */
|
|
.vertical {
|
|
aspect-ratio: 11 / 16;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Горизонтальное изображение */
|
|
.horisontal {
|
|
aspect-ratio: 16 / 11;
|
|
padding: 0;
|
|
}
|
|
|
|
:global(.img-div) {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
align-content: center;
|
|
text-align: center;
|
|
width: 11rem;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
</style>
|