pixi.js PIXI.Texture.from() 无法添加图片

Question

我正在使用 react with pixi.js 来开发一个简单的网页游戏

我想从本地目录

向pixi.js添加一些图像

这是我学习的网站

https://pixijs.io/examples/#/demos-basic/container.js

这是代码

import * as PIXI from 'pixi.js'
import React from 'react'

export default class PixiTestPage extends React.Component{
    componentDidMount(){
        //Create a Pixi Application
        const app = new PIXI.Application({
            backgroundColor: 0x1099bb
        });

        //Add the canvas that Pixi automatically created for you to the HTML document
        document.body.appendChild(app.view);

        const texture = PIXI.Texture.from("./bunny.png")
        const bunny = new PIXI.Sprite(texture);

        bunny.anchor.set(0.5)
        bunny.x = app.screen.width / 2;
        bunny.y = app.screen.height / 2;  
        app.stage.addChild(bunny);  
    }
    render(){
        return (
            <div>

            </div>
        )
    }
}

但是浏览器一直显示错误信息 Uncaught (in promise)

和我用的一样@inlet/react-pixi

https://reactpixi.org/

import * as PIXI from 'pixi.js'
import React from 'react'
import { Stage, Sprite } from '@inlet/react-pixi';

export default class PixiTestPage extends React.Component{
    componentDidMount(){
    }
    render(){
        return (
            <div>
                <Stage>
                    <Sprite image="./bunny.png" x={100} y={100} />
                </Stage>
            </div>
        )
    }
}

未捕获（承诺）错误仍然存在

但是当我使用 url 比如

https://pixijs.io/examples/examples/assets/bunny.png

有效

如何在本地目录下使用pixi.js中的图片？

这里是图片路径

path

Answer 1

哦我忘了反应必须使用导入图像...

所以解决方案是

import React from 'react'
import { Stage, Sprite } from '@inlet/react-pixi';
import bunny from './bunny.png'

export default class PixiTestPage extends React.Component{
    componentDidMount(){
    }
    render(){
        return (
            <div>
                <Stage>
                    <Sprite image={bunny} x={100} y={100} />
                </Stage>
            </div>
        )
    }
}

pixi.js PIXI.Texture.from() 无法添加图片

pixi.js PIXI.Texture.from() can't add images

javascript

image

reactjs

pixi.js