Image

<script lang="ts">
  import { Button, Image } from 'svelte-tweakpane-ui';

  let source = 'placeholder';

  async function getRandomKittenUrl() {
    const { url } = await fetch(
      'https://source.unsplash.com/800x800/?kitten',
      { method: 'HEAD', redirect: 'follow' }
    );
    return url;
  }
</script>

<Image bind:value={source} fit="contain" label="Image" />
<Button
  on:click={async () => {
    source = await getRandomKittenUrl();
  }}
  label="Random Placeholder"
  title="Load Kitten"
/>

<div class="demo">
  {#if source === 'placeholder'}
    <p>Tap “No Image” above to load an image from disk.</p>
  {:else}
    <img alt="" src={source} />
  {/if}
</div>

<style>
  div.demo {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 100%;
    background: linear-gradient(magenta, orange);
  }

  div.demo > img {
    max-width: 80%;
    max-height: 80%;
  }

  div.demo > p {
    max-width: 50%;
    color: white;
    text-align: center;
  }
</style>