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

I'm using react with PixiJS to develop a simple web game.

And want to add some images to pixi.js from local directory.

Here is the website I studied:

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

And here are the codes:

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>
        )
    }
}

But the browser keep showing error message

Uncaught (in promise)

same as I use @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>
        )
    }
}

the Uncaught (in promise) error still there

However when I am using the URL like

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

then it worked

How to use images in pixi.js with local directory?

Here is the image path:

Oh I forgot react must use import images...

so the solution is

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>
        )
    }
}