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

【问题标题】：What is the best way to store an image in Javascript object?在 Javascript 对象中存储图像的最佳方法是什么？
【发布时间】：2020-11-23 23:38:55
【问题描述】：

我正在尝试找出将图像存储在 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>
}

【问题讨论】：

标签： javascript reactjs react-native jsx

【解决方案1】：

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

import Image from "./project1ImagePath.png"

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

【讨论】：

【解决方案2】：

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

【讨论】：