E
E
ERomulon2019-04-30 09:53:49
webpack
ERomulon, 2019-04-30 09:53:49

Error loading png in loader Pixi.js + Vue.js?

Hi everyone, I'm creating a pixie preloader in a vue app. I do everything, as in instances, very different, but a maximum of 1 png 214x214 doge is loaded, everything else is not loaded, the error can only be found in the loader in the sprite object. Here is an example code, followed by the error text. I’ll clarify that I put pictures for sprites both in assets inside src and in public.

loader
          .add("a", "logo.png")
          .add("b", "bbb.png")
          .load(handleLoadComplete);

function handleLoadComplete() {
    let texture = loader.resources.a.texture;
    img = new PIXI.Sprite(texture);
    img.anchor.x = 0.5;
    img.anchor.y = 0.5;
    app.stage.addChild(img);

    app.ticker.add(animate);
};

function animate() {
    img.x = app.renderer.screen.width / 2;
    img.y = app.renderer.screen.height / 2;
    img.rotation += 0.1;
}

Error text in loader: "Error: Failed to load element using: IMG at Resource.abort (webpack-internal:///./node_modules/resource-loader/lib/Resource.js:388:22) at Resource._onError ( webpack-internal:///./node_modules/resource-loader/lib/Resource.js:753:14)"
In loader.resourses.b.error.message the short text is "Failed to load element using: IMG".

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Vitaly K., 2020-10-13
@ERomulon

Good afternoon. Specifically, in this case, the problem occurs, since the path to the image is specified relative to the project root, and not relative to the built version.
And since the project is built on the fly, to find out the relative path of the image (along with hashes and other things), instead of manually specifying the path, import the image:

import logoImagePath from './logo.png';
import bbbImagePath from './bbb.png';

loader
          .add("a", logoImagePath)
          .add("b", bbbImagePath)

In this case, the "Error: Failed to load element using: IMG" error will no longer occur, as pixi will be able to find and load the image.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question