Блог

вот мой код,в котором я пытаюсь передать объект типа{заголовок,описание , backgroundImg ….} компоненту раздела, используя реквизиты, я получаю все ключи и значения, но когда я использую его в компоненте раздела, получая все значения данных вместо backgroundImg, почему..?

 import React from "react";
import Section from "./Section";

function Home() {
  return (
    <div>
      <div className="container">
        <Section
          title="Model S"
          description="Order Online for Touchless Delivery"
          backgroundImg="model-s.jpg"
          leftButton="custom order"
          rightButton="existing inventory"
        />
        <Section
          title="Model Y"
          description="Order Online for Touchless Delivery"
          backgroundImg="../images/model-y.jpg"
          leftButton="custom order"
          rightButton="existing inventory"
        />

    </div>
  );
}

export default Home;
 

Для

 import React from "react";
import DownArrow from "../images/down-arrow.svg";

const Section = (props) => {
  return (
    <div
      className="Wrap"
      style={{ backgroundImage: `url(${props.backgroundImg})` }}
    >
      <div className="item_text">
        <h1>{props.title}</h1>
        <p>{props.description}</p>
      </div>
      <div className="">
        <div className="item_buttom">
          <div className="leftButton">{props.leftButton}</div>
          <div className="RightButton">{props.rightButton}</div>
        </div>
        <div>
          <img src={DownArrow} alt="svgImg" className="DownArrow" />
        </div>
      </div>
    </div>
  );
};

export default Section;
 

Мой путь к папке с изображениями — «../изображения/…»

Вам необходимо импортировать изображение в свой домашний компонент.

Нравится

 import sectionImage from "../images/image.jpg";
 

затем передайте изображение следующим образом

 <Section
    backgroundImg={sectionImage}
/>
 

Тогда это должно работать нормально.