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.