Ошибка загрузки png в loader Pixi.js + Vue.js?

Question

[ERomulon]

Привет всем, создаю прелоадер на пикси в vue приложении. Все делаю, как в экзамплах, самых разных, но грузится максимум 1 png 214x214 doge, все остальное не грузится, ошибку можно найти только в loader в объекте спрайта. Вот пример кода, далее будет текст ошибки. Уточню, что картинки для спрайтов помещаю и в assets внутри src и в 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;
}

Текст ошибки в 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)"

В loader.resourses.b.error.message краткий текст такой "Failed to load element using: IMG".

Answer 1

[Виталий К.]

Добрый день. Конкретно в данном случае, проблема возникает, так как путь к изображению указывается относительно корня проекта, а не относительно собранной версии.

А поскольку проект собирается на лету, то чтобы узнать относительный путь изображения (вместе с хешами и прочим), вместо указания пути руками, импортируйте изображение:

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

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

В этом случае ошибка "Error: Failed to load element using: IMG" падать больше не будет, так как pixi сумеет найти и загрузить картинку.

Comments

[Виталий К.]

Сам с столкнулся с такой проблемой и беда заключалась именно в пути, определяющемся при сборке. Не исключаю, что могут быть другие причины, почему может не загрузиться изображение и упасть "Failed to load element using: IMG"