Reactjs – How to use an picture in my project's assets for an img tag in JSX?

export default function Journal() {

    const myImg = new Image()
    myImg.src = "src/images/my_japan_trip.jpg"
    
    const journal = {
        title: "My Japan trip",
        image: myImg.src,
        text: "I went to Japan last winter."
    }
    return (
        <div id="journal">

            <div>
                <h2>
                    {journal.title}
                </h2>
            </div>

            <div>
                <img src={journal.image} />
            </div>

            <div>
                <p>
                    {journal.text}
                </p>
            </div>
            
        </div>
    )
}

Here is a screenshot of the journal entry element that I am trying to makeHere is a screenshot of the code that I used to make the journal entry element

I am working on a single page react app and have made a module for making journal entries. The module has a component called Journal. I have a variable which uses the Image constructor to make a new image element, then I assign a value for its src attribute which is equal to an image file path located within my project’s assets. After creating the image variable I have made an object for a journal entry. It has properties for title, image, and text. The return statement has jsx which makes a journal entry. The title and text values from the object are appearing on the webpage but I am having difficulty with the img element working to display the image on the webpage. Currently it is showing the broken img icon. I just copied and pasted the img into the value for the myImg variable’s src attribute. Can someone help me find how to display the image? Thanks.