Vue+TypeScript项目中PixiJS的Loader无法加载图片如何解决？

你的代码有两个核心错误：

• this指向丢失：调用this.app.loader.load(this.setup)时，setup方法的执行上下文被绑定到了Loader实例而非Vue组件实例，执行到this.app.stage.addChild时会找不到this.app属性，直接报错。
• 路径别名不识别：PIXI.Loader是运行时执行的加载逻辑，不识别Vue打包工具配置的@路径别名，直接传@/assets/logo.png会导致Loader请求不存在的地址，无法拿到图片资源。

你直接import logo的写法能运行，是因为import是打包阶段执行的，打包工具会把@/assets/logo.png替换成最终的可访问资源路径，再传给PIXI.Sprite.from自然能正常加载。

按如下步骤修改即可：

1. 保留import logo from '@/assets/logo.png'的写法，提前拿到打包后的真实资源路径
2. 把setup方法改为箭头函数，固定this指向为Vue组件实例
3. 删掉多余的refs()方法，直接访问this.$refs即可

修改后的核心代码如下：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div ref='iv'></div>
</template>

<script lang="ts">
import logo from '@/assets/logo.png';
import { Options, Vue } from 'vue-class-component';
import * as PIXI from 'pixi.js'

@Options({})
export default class App extends Vue {
  app = new PIXI.Application({width:400,height:300})

  // 箭头函数保证this指向组件实例
  setup = (loader:PIXI.Loader) => {
      const bunny = new PIXI.Sprite(loader.resources.logo.texture);
      this.app.stage.addChild(bunny);
  }

  mounted(){
    this.$refs.iv.appendChild(this.app.view)
    // 传入import得到的真实路径
    this.app.loader.add("logo", logo).load(this.setup)
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

如果你不想提前import图片，也可以把Loader传入的路径替换为资源的绝对路径或者相对于页面访问地址的相对路径，不使用@别名即可。

内容的提问来源于stack exchange，提问作者behtgod