【Vue Cli,Pixi】スプライトシートの読み込みに失敗する

前提・実現したいこと

Vue CliとPixiJsでゲームなどを作りたいのですが
スプライトシートの読み込みでエラーが出てしまいます

思うにビルド時にtori.jsonで指定している"image": "tori.png",のパスが通らないことが原因ではないかと考えたのですが
解決法がわからないため質問させていただきました
よろしくお願いします

発生している問題・エラーメッセージ

Uncaught Error: The frameId "niwatori.png" does not exist in the texture cache

該当のソースコード

Canvas.vue

vue
1<template lang="html">
2<main>
3</main>
4</template>
5
6<script lang="ts">
7import {Component, Emit, Prop, Vue} from "vue-property-decorator";
8import * as PIXI from "pixi.js";
9
10@Component
11export default class Canvas extends Vue{
12    app: any;
13    container: any;
14    niwatori: any;
15
16    public mounted(){
17
18        this.app = new PIXI.Application({
19            width: 300,
20            height: 200,
21            backgroundColor: 0x1099bb
22        });
23        (document.querySelector('main') as HTMLInputElement).appendChild(this.app.view);
24    
25        this.app.stop();
26
27        PIXI.loader
28        .add('spritesheet', require('../assets/spritesheet/tori.json'))
29        .load(this.onAssetsLoaded);
30
31        this.container = new PIXI.Container();
32
33        this.app.stage.interactive = true;
34        this.app.stage.addChild(this.container);
35    }
36
37    private onAssetsLoaded(){
38        const imgName: string = 'niwatori.png';
39        this.niwatori =  PIXI.Sprite.fromFrame(imgName); // Uncaught Error: The frameId "niwatori.png" does not exist in the texture cache
40        this.niwatori.x = 100;
41        this.niwatori.y = 110;
42        this.niwatori.width = 100;
43        this.niwatori.height = 50;
44        this.container.addChild(this.niwatori);
45
46        this.app.start();
47    }
48}
49</script>

tori.json

json
1{
2	"frames": {
3		"niwatori.png": {
4			"frame": {
5				"x": 0,
6				"y": 0,
7				"w": 800,
8				"h": 462
9			},
10			"rotated": false,
11			"trimmed": false,
12			"spriteSourceSize": {
13				"x": 0,
14				"y": 0,
15				"w": 800,
16				"h": 462
17			},
18			"sourceSize": {
19				"w": 800,
20				"h": 462
21			}
22		},
23		"okame.png": {
24			"frame": {
25				"x": 0,
26				"y": 462,
27				"w": 800,
28				"h": 462
29			},
30			"rotated": false,
31			"trimmed": false,
32			"spriteSourceSize": {
33				"x": 0,
34				"y": 0,
35				"w": 800,
36				"h": 462
37			},
38			"sourceSize": {
39				"w": 800,
40				"h": 462
41			}
42		},
43		"kozakura.png": {
44			"frame": {
45				"x": 0,
46				"y": 924,
47				"w": 800,
48				"h": 462
49			},
50			"rotated": false,
51			"trimmed": false,
52			"spriteSourceSize": {
53				"x": 0,
54				"y": 0,
55				"w": 800,
56				"h": 462
57			},
58			"sourceSize": {
59				"w": 800,
60				"h": 462
61			}
62		}
63	},
64	"meta": {
65		"app": "https://www.codeandweb.com/texturepacker",
66		"version": "1.0",
67		"image": "tori.png",
68		"format": "RGBA8888",
69		"size": {
70			"w": 800,
71			"h": 1386
72		},
73		"scale": "1",
74		"smartupdate": "$TexturePacker:SmartUpdate:7abd80d110c3db20c611c401710aa284:7b7b789a40d9e26bbf6c280e3701e610:e389f8b5e49710696e59ba6871252f12$"
75	}
76}

試したこと

以下のコードでパスに間違いがないこととファイルが存在することを確認しました

typescript
1    public created(){
2        const toriJson = require('../assets/spritesheet/tori.json');
3        const toriPng = require('../assets/spritesheet/tori.png');
4        console.log(toriPng);
5        console.log(toriJson);
6    }