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

我试图找出在Javascript对象中存储图像的最佳方法，或者这是否可行。我目前正在构建一个ReactJS项目，该项目将有多张卡片，其中包含关于多个不同项目的信息。我正在创建多个对象的数组，然后计划映射该数组以创建多张卡。我唯一不确定的是如何处理每张卡的标题图像。您可以将它们存储在对象中，还是必须将它们导入组件中，然后将它们传递到卡中

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?
    }
]

示例父组件

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

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

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

示例卡组件

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

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

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

---

是的，您可以将其存储在对象中，但也需要导入它

import Image from "./project1ImagePath.png"

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