Jump to content

Can I load images (not textures) with AssetLoader


Recommended Posts

In my project I use PixiJS with Svelte. Before initializing the PixiJS app I have a page (svelte component) in which I  load all assets with help of AssetLoader.

import { Assets } from 'pixi.js';

const bunny = await Assets.load('/images/bunny.png');

Then I want to use loaded files in img tag like so

<img src="/img/bunny.pg" />

In this case image downloaded second time. Is any way to get path to downloaded file from Textures which i can use in src of img tag?Or may be any ways to modify AssetLoader config?

Link to comment
Share on other sites

loadTextures.load = async function (
      url: string,
      asset?: LoadAsset<IBaseTextureOptions<any>>,
      loader?: Loader,
    ) {
      let src;
      const res = await fetch(url);
      const blob = await res.blob();
      const blobUrl = URL.createObjectURL(blob);

      store.set({ ...defaultState, data: blobUrl }); // save url to blob file which i can use in scr attribute of img

      await new Promise((resolve) => {
        src = new Image();
        src.crossOrigin = this.config.crossOrigin;

        src.src = blobUrl;
        if (src.complete) {
        } else {
          src.onload = (): void => {

      const base = new BaseTexture(src, {
        resolution: utils.getResolutionOfUrl(url),

      base.resource.src = url;

      return createTexture(base, loader, url);

I find solution to rewrite loadTextures.load function but I think it's not good way because it not support web workers  

Link to comment
Share on other sites

Posted (edited)

I would rather make the middleware which will save image to store after the've being loaded.


// Chainable `use` to add a middleware that runs for each resource, *after* loading that resource. // This is useful to implement custom parsing modules (like spritesheet parsers, spine parser, etc).


Edited by sneakypeeky
Link to comment
Share on other sites

It's only works with https://api.pixijs.io/@pixi/loaders/PIXI/Loader.html

But Pixi 7.2.0 uses https://pixijs.download/dev/docs/PIXI.Assets.html

I try to make extension for loadParser https://pixijs.download/dev/docs/PIXI.Assets.html but It's not working. Extension not intercept the process

// add extension before loading assets
				extension: {
					type: ExtensionType.LoadParser,
				test(url) {
					return utils.path.extname(url).includes('.png')
				async load(url) {
					return fetch(url) // no idea how to do it


Edited by Gleb
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...