svelte-image
svelte-image copied to clipboard
Process Background image
Hello,
Is there a way to process background images?
Below I've added some example of code that I've tried.
The only way that is working is the let nameImg = './img/image.png'; and put the variable in the inline style
<script>
import Image from "svelte-image";
// import BgImage from '../static/img/shoe_prite.png';
// import UnderbgImage from '../static/img/under_BG.png';
let bgImage = './img/shoe_prite.png';
let underbgImage = './img/under_BG.png';
</script>
<style>
.main__container {
display: flex;
align-items: flex-end;
justify-content: center;
width: 300px;
height: 250px;
background-image: url("../static/img/shoe_prite.png"), url("./img/under_BG.png'");
background-repeat: no-repeat;
background-position: center top, center;
background-size: 100%;
}
</style>
<div
draggable="false"
class="main__container"
id="main__container"
>
<!-- style='background-image: url("{bgImage}"), url("{underbgImage}");' -->
</div>```