Image

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

  let source: ImageValue;

  async function getRandomKittenUrl() {
    const { url } = await fetch('https://loremflickr.com/800/800/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 === undefined}
    <p>Tap “No Image” above to load an image from disk.</p>
  {:else if typeof source === 'string'}
    <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>