I want to render the star1.png located in src/images/ directory without using import at the top and without using the public directory. The reason I want to do that is I want to pass in an image as props and I can't do that using import and I don't want to touch the public directory either.

My code:

import React from "react"
import ReactDOM from "react-dom"

class App extends React.Component
{
    render(){
        let starIcon = "./images/star1.png"

        return(
            <>
                <h1>Hello</h1>
                <img src={starIcon} />
            </>
        )
    }
}

ReactDOM.render(<App />, document.getElementById("root"))

CodePudding user response：

I'm not sure if I understand your question fully, but you could pass the image as a blob through props and set that blob as the source of the image.

CodePudding user response：

The problem is related to the prod build I think because when you created a build asset directory will not copy.

Solutions:

1. You can import it'll be added to the bundle it'll work
2. You can move to the public it'll also be added in the build/dist directory
3. You can manually/automatically copy assets to the build/dist directory.

The last solution you are looking I think.