Блог

Я новичок в PixiJs.
Я хочу показать изображение спрайта в качестве примера, но я потерпел поражение.
Фреймворк — это Vue с Typescript.
Я использовал vue-cli для создания проекта и только модифицировал App.vue файл следующим образом:

 <template>
  <img alt="Vue logo" src="./assets/logo.png">
  <!-- <HelloWorld msg="Welcome to Your Vue.js   TypeScript App"/> -->
  <div ref='iv'></div>
</template>

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


@Options({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {
  refs():any{
    return this.$refs
  }

  app=new PIXI.Application({width:400,height:300})

  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)

    this.app.loader.add("logo","@/assets/logo.png").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 для загрузки изображения, например:

 import logo from '@/assets/logo.png';
...
mounted(){
...
  let s=PIXI.Sprite.from(logo)
  this.app.stage.addChild(s)
...
}
 

Это работает.
В чем моя ошибка?
Как я могу правильно использовать загрузчик?