How to use an picture in my project’s assets for an img tag in JSX?

  Kiến thức lập trình

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.

New contributor

Matthew Abebe is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

LEAVE A COMMENT