Image

Basic

<script>
  let src = 'https://picsum.photos/500/300'

  const toggle = () => {
    src = `https://picsum.photos/500/300?t=${Math.random()}`
  }
</script>
<CButton label="Toggle image" on:click={toggle} />
<CImage width="500px" height="300px" {src} />
<script>
  let src = 'https://picsum.photos/500/300'

  const toggle = () => {
    src = `https://picsum.photos/500/300?t=${Math.random()}`
  }
</script>
<CButton label="Toggle image" on:click={toggle} />
<CImage width="500px" height="300px" {src} />
svelte
Click fold/expand code

Custom placeholder

<script>
  let show = true
</script>
<CButton label="Toggle image" on:click={() => show = !show} />
{#if show}
  <CImage width="500px" height="300px" src="https://picsum.photos/500/300" placeholderSrc="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGZpbGw9IiMyZGNjOWYiIGQ9Ik0zMCA1Ljg1MXYyMC4yOThIMlY1Ljg1MWgyOCIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0yNC4yMzIgOC41NDFhMi4yIDIuMiAwIDEgMCAxLjEyNy42MjNhMi4yMTIgMi4yMTIgMCAwIDAtMS4xMjctLjYyM00xOC4xMTEgMjAuMXEtMi43MjQtMy43ODgtNS40NS03LjU3NUw0LjU3OSAyMy43NjZoMTAuOXExLjMxNi0xLjgzMiAyLjYzNC0zLjY2M00yMi4wNTcgMTZxLTIuNzkzIDMuODgyLTUuNTg0IDcuNzY1aDExLjE2OVEyNC44NTEgMTkuODgyIDIyLjA1NyAxNloiLz48L3N2Zz4=" />
{/if}
<script>
  let show = true
</script>
<CButton label="Toggle image" on:click={() => show = !show} />
{#if show}
  <CImage width="500px" height="300px" src="https://picsum.photos/500/300" placeholderSrc="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGZpbGw9IiMyZGNjOWYiIGQ9Ik0zMCA1Ljg1MXYyMC4yOThIMlY1Ljg1MWgyOCIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0yNC4yMzIgOC41NDFhMi4yIDIuMiAwIDEgMCAxLjEyNy42MjNhMi4yMTIgMi4yMTIgMCAwIDAtMS4xMjctLjYyM00xOC4xMTEgMjAuMXEtMi43MjQtMy43ODgtNS40NS03LjU3NUw0LjU3OSAyMy43NjZoMTAuOXExLjMxNi0xLjgzMiAyLjYzNC0zLjY2M00yMi4wNTcgMTZxLTIuNzkzIDMuODgyLTUuNTg0IDcuNzY1aDExLjE2OVEyNC44NTEgMTkuODgyIDIyLjA1NyAxNloiLz48L3N2Zz4=" />
{/if}
svelte
Click fold/expand code

Custom loading

<script>
  let src = 'https://picsum.photos/500/300'

  const toggle = () => {
    src = `https://picsum.photos/500/300?t=${Math.random()}`
  }
</script>
<CButton label="Toggle image" on:click={toggle} />
<div class="flex gap-4 mt-4">
  <CImage width="100px" height="100px" {src}>
    <div class="text-white">
      <CLoadingLattice slot="loading" />
    </div>
  </CImage>
  <CImage width="100px" height="100px" {src}>
    <CLoadingPuff slot="loading" />
  </CImage>
  <CImage width="100px" height="100px" {src}>
    <CLoadingPie slot="loading" />
  </CImage>
</div>
<script>
  let src = 'https://picsum.photos/500/300'

  const toggle = () => {
    src = `https://picsum.photos/500/300?t=${Math.random()}`
  }
</script>
<CButton label="Toggle image" on:click={toggle} />
<div class="flex gap-4 mt-4">
  <CImage width="100px" height="100px" {src}>
    <div class="text-white">
      <CLoadingLattice slot="loading" />
    </div>
  </CImage>
  <CImage width="100px" height="100px" {src}>
    <CLoadingPuff slot="loading" />
  </CImage>
  <CImage width="100px" height="100px" {src}>
    <CLoadingPie slot="loading" />
  </CImage>
</div>
svelte
Click fold/expand code
Img native attrs

All the props pass to CImage that not in prop list would directly add to <img /> tag. You can add decoding, draggable, etc..

CImage Props

  • src
    string
    default: undefined

    The image src

  • placeholderSrc
    string
    default: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxnIGZpbGw9ImN1cnJlbnRDb2xvciI+PHBhdGggZD0iTTYuMDAyIDUuNWExLjUgMS41IDAgMSAxLTMgMGExLjUgMS41IDAgMCAxIDMgMHoiLz48cGF0aCBkPSJNMi4wMDIgMWEyIDIgMCAwIDAtMiAydjEwYTIgMiAwIDAgMCAyIDJoMTJhMiAyIDAgMCAwIDItMlYzYTIgMiAwIDAgMC0yLTJoLTEyem0xMiAxYTEgMSAwIDAgMSAxIDF2Ni41bC0zLjc3Ny0xLjk0N2EuNS41IDAgMCAwLS41NzcuMDkzbC0zLjcxIDMuNzFsLTIuNjYtMS43NzJhLjUuNSAwIDAgMC0uNjMuMDYyTDEuMDAyIDEyVjNhMSAxIDAgMCAxIDEtMWgxMnoiLz48L2c+PC9zdmc+

    The default image src used before real src image loaded

  • width
    string
    default: 100%

    The image width

  • height
    string
    default: 300px

    The image height

  • alt
    string
    default:

    The alt prop

  • imgClass
    string
    default:

    The class that apply to img tag

  • customHeaders
    object
    default: undefined

    Custom image request headers

CImage Events

No data

CImage Slots

  • loading

    Customize loading content

  • err

    Customize the error status

    Bindings:

    • err any

      The error object

CImage Exports

No data
Suggest changes to this page
Last update at: 2023/08/15 05:32:01