asset

Gets or loads an asset from PIXI.Assets and returns a readable store containing the loaded asset. If the asset has not yet been loaded the store will update when the loading completes.

There is also texture which uses this so it can be passed directly to components as a texture prop.

Svelte 5
Svelte 4 (deprecated)

<script>
  import * as PIXI from 'pixi.js'
  import { Text, asset } from 'svelte-pixi'

  const image = asset('/assets/adventurer.png')

  $effect(() => console.log('image', $image))
</script>

<Text
  x={200}
  y={200}
  text={$image ? 'Loaded, check console' : 'Loading...'}
  style={{ fill: 'white' }}
/>

<script>
  import * as PIXI from 'pixi.js'
  import { Text, asset } from 'svelte-pixi/svelte-4'

  const image = asset('/assets/adventurer.png')

  $: console.log('image', $image)
</script>

<Text
  x={200}
  y={200}
  text={$image ? 'Loaded, check console' : 'Loading...'}
  style={{ fill: 'white' }}
/>

Type Definition

function asset<T = any>(
  src: string | PIXI.UnresolvedAsset,
  opts?: {
    onProgress?: (progress: number) => void
    onComplete?: (asset: PIXI.ResolvedAsset) => void
    onError?: (error: Error) => void
  },
): Readable<T | undefined>