Как передать изображения в качестве реквизита в массиве списка объектов в React

Question

Я пробовал несколько способов, чтобы фоновое изображение отображалось в «рамке» в стилизованных компонентах. Как передать изображение в качестве фона в изображение коробки с изображением в массиве объектов? Я не знаю, это проблема с синтаксисом или вы просто не можете это сделать? Любая помощь будет принята с благодарностью!

import styled from "styled-components";
import px2vw from "../../../../utils/px2vw";
import {StyledIconBase} from '@styled-icons/styled-icon'
import travelImg from  "./travelBackground2.png";



export const BackgroudnImage = styled.div`
    border: 1px solid #000;
    background-repeat: no-repeat;
    width: 100%;
    height: 850px;;
`;


export const IconStyleWrapper = styled.div`
  ${StyledIconBase} {
    height: 35px;
    width: 35px;
    padding-left: ${px2vw(42)};
  }
`

export const Header = styled.div`
  display: flex;
  flex-wrap: wrap;

  width: 100%;
  height: 74px;
  padding-top: ${px2vw(42)};
  padding-left: ${px2vw(32)};
  color: black;
  font-size: 42px;
`;

export const HeaderOffSet = styled.div`
  margin-right:${px2vw(680)};
`;


export const HeaderLinks = styled.div`
  display: flex;
  flex-wrap: wrap;

  margin-left: ${px2vw(42)};
  color: #bf4343;
  font-size: 12px;
  padding-top: ${px2vw(22)};
`;

export const HeaderText = styled.a`
    font-size: 14px;
    color: #bf4343;
    text-decoration: underline;
`;

export const Container = styled.div`
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: ${px2vw(32)};
  max-width: 100%;

  @media (min-width: 1024px) {
    flex-wrap: nowrap;
  }
`;

export const Box = styled.div`
  display: flex;
  width: ${px2vw(320, 320)};
  min-height: ${px2vw(200, 320)};
  flex-direction: column;
  padding: ${px2vw(20)};
  margin: ${px2vw(20)};
  background-color: ${props => props.bgColor};
  height: 100%;
  border-radius: 10px;

  background-image: ${props => props.BackgroundImage};
  background-repeat: no-repeat;
  background-size: 275px 305px;

  &:hover {
    transition-timing-function: ease-in;
    transition: 0.2s;
    transform: scale(1.15);
    background-color: ${props => props.hoverColor};
  }

  transition-timing-function: ease-out;
  transition: 0.25s;
  transform: scale(1);

  @media (min-width: 768px) {
    width: ${px2vw(320, 768)};
    min-height: ${px2vw(200, 768)};
    height: 100%;
  }

  @media (min-width: 1024px) {
    width: ${px2vw(500)};
    min-height: ${px2vw(300)};
    height: 100%;
  }
`;

export const BoxTitle = styled.h3`
  color: #333;
  font-size: 2rem;
  text-align: center;

  @media (min-width: 1024px) {
    font-size: 1.5rem;
  }
`;

export const BoxText = styled.p`
  margin-top: ${px2vw(20)};
  color: #666;
  font-size: 1.5rem;

  @media (min-width: 1024px) {
    font-size: 1rem;
  }
`;

import React from "react";
import Global from "../../../styles/global";
import styled from "styled-components";
import travelImage from "./styles/travelBackground2.png"

import {Container, Box, BoxTitle, BoxText, Header, HeaderLinks, HeaderText,HeaderOffSet, BackgroudnImage} from "./styles/HomeStyles"

export const boxData = [
  {
    id: 0,
    title: "Travel",
    text: "check out some Travel Stories!",
    bgColor: "#D5CAFA",
    hoverColor: "#e3dcfa",
    image: require("./styles/travelBackground2.png"),
    link: "travel"
  },
  {
    id: 1,
    title: "Crypto",
    text: "Thoughts and Information on Crypto",
    bgColor: "#EDA9A9",
    hoverColor: "#ebbebe",
    image: "null",
    link: "block-chain"
  },
  {
    id: 2,
    title: "Stocks",
    text: "From penny stocks to Marco econmics",
    bgColor: "#F2EE8D",
    hoverColor: "#ebe8a4",
    image: "null",
    link: "stocks"
  },
  {
    id: 3,
    title: "Software",
    text: "Projects that I have worked / working on",
    bgColor: "#9FEACD",
    hoverColor: "#bce8d7",
    image: "null",
    link: "software"
  }
];

const headerData = [
  {
    id: 0,
    text: "Articles",
    link: "/articles"
  } ,
  {
    id: 1,
    text: "About",
    link: "/about"
  },
  {
    id: 2,
    text: "Website Source Code",
    link: "https://github.com/Klongrich/WebsiteFun"
  }
]

export default function HomePage() {
  return (
    <div class="background">

    <Header>
      <HeaderOffSet>
      Kyle Longrich
      </HeaderOffSet>
      {headerData.map(data => (
        <HeaderLinks>
          <HeaderText key={data.id} as="a" href={data.link}> {data.text} </HeaderText>
        </HeaderLinks>

      ))}
    </Header>
    <Container>
      {boxData.map(box => (
        <Box key={box.id} bgColor={box.bgColor} BackgroundImage={box.image} as="a" href={box.link}>
          <BoxTitle>{box.title}</BoxTitle>
          <BoxText>{box.text}</BoxText>
        </Box>
      ))}
    </Container>  
    </div>
  );
}

Answer 1

Пропорции компонентов не должны начинаться с заглавной буквы, поэтому сначала давайте изменим

<Box key={box.id} bgColor={box.bgColor} BackgroundImage={box.image} as="a" href={box.link}>

на

<Box key={box.id} bgColor={box.bgColor} backgroundImage={box.image} as="a" href={box.link}>

, затем внутри boxData, просто используйте изображение, которое вы уже импортировали вверху, вместо использования требуется для повторного импорта того же изображения. ТАК измените это:

{
    id: 0,
    title: "Travel",
    text: "check out some Travel Stories!",
    bgColor: "#D5CAFA",
    hoverColor: "#e3dcfa",
    image: require("./styles/travelBackground2.png"),
    link: "travel"
},

на это:

{
    id: 0,
    title: "Travel",
    text: "check out some Travel Stories!",
    bgColor: "#D5CAFA",
    hoverColor: "#e3dcfa",
    image: travelImage,
    link: "travel"
},

Теперь мы можем ссылаться на backgroundImage опору внутри Box следующим образом:

export const Box = styled.div`
  display: flex;
  //...style stuff
  background-image: `url(${props.backgroundImage})`

Если это не работает, добавьте атрибут стиля непосредственно к Box, например, так:

<Box style={{backgroundImage: `url(${travelImage})`}}>

Я знаю, что встроенные стили - это не то, что вы ищете, но это поможет вам сузить источник неудача.

Ура! 10

Answer 2

Тег изображения должен был быть изменен во втором файле.

import travelImage from "./styles/travelBackground2.png"

{
    id: 0,
    title: "Travel",
    text: "check out some Travel Stories!",
    bgColor: "#D5CAFA",
    hoverColor: "#e3dcfa",
    image: travelImage,
    link: "travel"
  }