pixi.js已经使用资源加载器 loader,但图片却渲染不出来

使用loader加载图片

引用自gpt

1. 首先需要使用 PIXI 的 Loader 类或 PIXI.Loader.shared 加载图片资源。这可以通过以下代码实现：

import * as PIXI from 'pixi.js';

// 创建 PIXI Loader 实例
const loader = PIXI.Loader.shared;

// 添加要加载的图片资源
loader.add('image', 'path/to/image.png');

// 监听加载完成事件
loader.load(() => {
  console.log('图片资源加载完成');
});

1. 创建 Sprite 对象在加载完成事件中，可以创建 PIXI.Sprite 对象来表示加载完成的图片资源。以下是一个示例代码：

2. // 在加载完成事件中创建 Sprite 对象
   const texture = loader.resources.image.texture;
   const sprite = new PIXI.Sprite(texture);

3. 设置 Sprite 对象的属性在创建 Sprite 对象后，可以设置其在舞台中显示的位置、缩放比例、旋转角度等属性。以下是一些常用的属性设置方法：

   sprite.anchor.set(0.5, 0.5); // 设置锚点
   sprite.position.set(100, 100); // 设置位置
   sprite.scale.set(0.5, 0.5); // 设置缩放比例
   sprite.rotation = 0.5; // 设置旋转角度

    
4.  将 Sprite 对象添加到舞台中最后，将创建好的 Sprite 对象添加到 PIXI 应用的舞台中，这可以使用 PIXI.Application 实例中的 stage 属性来实现：

   const app = new PIXI.Application(/* options */);
   
   // 将 Sprite 对象添加到舞台中
   app.stage.addChild(sprite);

在上述步骤完成后，图片就会被渲染到屏幕上了。完整代码如下：

import * as PIXI from 'pixi.js';

const app = new PIXI.Application({
  width: 800,
  height: 600,
});
document.body.appendChild(app.view);

const loader = PIXI.Loader.shared;
loader.add('image', 'path/to/image.png');
loader.load(() => {
  const texture = loader.resources.image.texture;
  const sprite = new PIXI.Sprite(texture);
  sprite.anchor.set(0.5, 0.5);
  sprite.position.set(app.screen.width / 2, app.screen.height / 2);
  app.stage.addChild(sprite);
});

 原因：pixijs的版本不对 原来他们是6.2.0,虽然现在的package.json里面也是6.2.0但，package-lock.json里还有一些东西。卸载pixijs再重新安装就行了