在 Javascript object 中存储图像的最佳方式是什么？

Question

I am trying to figure out the best way to store an image in a Javascript object or if that is even possible. I am currently building a ReactJS project that will have multiple cards containing information about multiple different projects. I am creating this array of multiple objects and then plan to map the array to create multiple cards. The only part I am unsure of is how to handle the images that will be the header for each card. Can you store them in an object or do you have to import them in your component and then pass them to the card?

export const PROJECTS =
[
    project1 =
    {
        title: "Project 1 Title",
        description: "Project 1 Description",
        linkToProject: "https://linkToProject1.com/",
        image: "./project1ImagePath.png" or can I somehow import the image and then store it here?
    }
]

Example Parent Component

return (
    <div>
        { PROJECTS.map((project, index) => {
           return (
              <Card project={project} index={index} />
           })
        }

Example Card Component

const Card = props => {
     return (
         <div>
            <img src={props.project.image} />
         </div>
}

Answer 1

import Image1 from "./project1ImagePath.png"
import Image2 from "./project1ImagePath.png"

export const PROJECTS =
[

    {
        title: "Project 1 Title",
        description: "Project 1 Description",
        linkToProject: "https://linkToProject1.com/",
        url: Image1
    },

    {
        title: "Project 2 Title",
        description: "Project 2 Description",
        linkToProject: "https://linkToProject2.com/",
        url: Image2
    }
]

return (
    <React.Fragment>
       {
       PROJECTS.map((project, i)=>{
          return <Card project={project} key={i} />
        })
       }
    </React.Fragment>        
 )

const Card = props => {
     return (
         <div>
            <img src={props.project.url} />
         </div>
)}

Answer 2

Yes you can store it in your object, but you also need to import it

import Image from "./project1ImagePath.png"

export const PROJECTS =
[
    project1 =
    {
        title: "Project 1 Title",
        description: "Project 1 Description",
        linkToProject: "https://linkToProject1.com/",
        image: Image
    }
]