svelte-image icon indicating copy to clipboard operation
svelte-image copied to clipboard

Process Background image

Open nem95 opened this issue 4 years ago • 0 comments

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>```

nem95 avatar Dec 01 '20 09:12 nem95