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

Question

我正在尝试找出将图像存储在 Javascript object 或什至可能的情况下的最佳方法。 我目前正在构建一个 ReactJS 项目，该项目将包含多张卡片，其中包含有关多个不同项目的信息。 我正在创建这个包含多个对象的数组，然后计划将 map 数组创建为多个卡片。 我唯一不确定的部分是如何处理每张卡的 header 图像。 您可以将它们存储在 object 中，还是必须将它们导入您的组件然后将它们传递给卡？

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

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

是的，您可以将其存储在您的 object 中，但您还需要导入它

import Image from "./project1ImagePath.png"

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