Can I load images (not textures) with AssetLoader

[Gleb]

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?

[Gleb]

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) {
          resolve(src);
        } else {
          src.onload = (): void => {
            resolve(src);
          };
        }
      });

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

      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  

[sneakypeeky]

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).

loader.use(parsingMiddleware);

Edited May 19, 2023 by sneakypeeky

[Gleb]

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
			extensions.add({
				extension: {
					type: ExtensionType.LoadParser,
				},
				test(url) {
					console.log('test')
					return utils.path.extname(url).includes('.png')
				},
				async load(url) {
					return fetch(url) // no idea how to do it
				},
			})

 

Edited May 26, 2023 by Gleb