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

Question

webpack

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 1

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.