>source

데이터 파일에서 페이지 섹션에 대한 내 인덱스 페이지로 경로 이름을 전달하려고 하면 텍스트 및 true 또는 false 변수와 같이 전달되는 다른 모든 것은 제대로 작동하지만 "require(../.. /images/svg-1.sv)"는 필수 및 이미지 소스 대신 페이지 소스에 [객체 모델]로 표시됩니다. 페이지 소스 오류

Data.js:

export const homeObjOne= {
       id: "about",
       lightBg: false,
       lightText: true,
       lightTextDesc: true,
       topLine: "Premium Bank",
       headline: "Unlimited Transactions with zero fees",
       description:
          "Get access to our exclusive app that allows you to send unlimited transactions
          without getting charged any fees.",
       buttonLabel: "Get started",
       imgStart: false,
       img: require('../../images/svg-1.svg'),
       alt: "Car",
       dark: true,
       primary: true,
       darkText: false,
    };

InfoSection용 index.js:

import React from "react";
import { Button } from "../ButtonElements";
import {
  InfoContainer,
  InfoWrapper,
  InfoRow,
  Column1,
  Column2,
  TextWrapper,
  TopLine,
  Heading,
  Subtitle,
  BtnWrap,
  ImgWrap,
  Img,
} from "./InfoElements";
const InfoSection= ({
  lightBg,
  id,
  imgStart,
  topLine,
  lightText,
  headline,
  darkText,
  description,
  buttonLabel,
  img,
  alt,
  primary,
  dark,
  dark2,
})=> {
  return (
    <>      <InfoContainer lightBg={lightBg} id={id}>        <InfoWrapper>          <InfoRow imgStart={imgStart}>            <Column1>              <TextWrapper>                <TopLine>{topLine}</TopLine>                <Heading lightText={lightText}>{headline}</Heading>                <Subtitle darkText={darkText}>{description}</Subtitle>                <BtnWrap>                  <Button
                    to="home"
                    smooth={true}
                    duration={500}
                    spy={true}
                    exact="true"
                    offset={-80}
                    primary={primary ? 1 : 0}
                    dark={dark ? 1 : 0}
                    dark2={dark2 ? 1 : 0}
                  >                    {buttonLabel}
                  </Button>                </BtnWrap>              </TextWrapper>            </Column1>            <Column2>              <ImgWrap>                <Img src={img} alt={alt} />              </ImgWrap>            </Column2>          </InfoRow>        </InfoWrapper>      </InfoContainer>    </>  );
};
export default InfoSection;

참고: 스타일 지정을 위해 styled-components도 사용하고 있습니다.

  • 답변 # 1

    요구 대신 가져오기를 사용할 수 있습니다.

     import Svg1 from '../../images/svg-1.svg';
       export const homeObjOne= {
       id: "about",
       lightBg: false,
       lightText: true,
       lightTextDesc: true,
       topLine: "Premium Bank",
       headline: "Unlimited Transactions with zero fees",
       description:
          "Get access to our exclusive app that allows you to send unlimited transactions
          without getting charged any fees.",
       buttonLabel: "Get started",
       imgStart: false,
       img: Svg1,
       alt: "Car",
       dark: true,
       primary: true,
       darkText: false,
    };
    

  • 이전 python : 단위 테스트에서 파일을 생성하고 기존 파일에 대해 인쇄하는 테스트 기능
  • 다음 c++ : catch되지 않은 모든 예외를 찾기 위해 clang-tidy 사용