52 lines
1.2 KiB
Svelte
52 lines
1.2 KiB
Svelte
<script>
|
|
import AddButton from "./add_button.svelte";
|
|
let { direction = "horisontal" } = $props();
|
|
let images = $state();
|
|
let image = $state();
|
|
|
|
$effect(() => {
|
|
if (images.length > 0) {
|
|
const reader = new FileReader();
|
|
reader.addEventListener("load", function () {
|
|
image.setAttribute("src", reader.result);
|
|
});
|
|
reader.readAsDataURL(images[0]);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="{direction} input img-div rounded">
|
|
<AddButton type="image" bind:files={images}/>
|
|
<img bind:this={image} src="" alt="">
|
|
</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;
|
|
}
|
|
|
|
:global(.img-div) img {
|
|
object-fit: cover;
|
|
width: 100%;
|
|
}
|
|
|
|
:global(.img-div) :global(.plus) {
|
|
z-index: 2;
|
|
}
|
|
</style>
|