Как лучше всего хранить изображение в объекте Javascript? - PullRequest
Новая
       85

Как лучше всего хранить изображение в объекте Javascript?

0 голосов
/ 04 августа 2020

Я пытаюсь выяснить, как лучше всего сохранить изображение в объекте 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>
}

Ответы [ 2 ]

1 голос
/ 04 августа 2020 
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>
)}
0 голосов
/ 04 августа 2020

Да, вы можете сохранить его в своем объекте, но вам также необходимо импортировать его 

import Image from "./project1ImagePath.png"

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