Trouble Importing Image React

Question

I'm following a React.JS tutorial and I'm having problems displaying an image. I don't get any errors but the image is not displaying. Below is the component and import code. Thank you.

------- Data.js-->

export const homeObjOne = {
  id: "about",
 ...
  imgStart: false,
  img: require("../../../images/svg-1.svg"),
  alt: "Car",
 ...
};

------- Index.js-->

import {
  .....
  Img,
} from "./InfoElements";

const InfoSection = ({
  ...
  img,
  ImgWrap
 ...
}) => {
  return (
    <>
      ...
              <ImgWrap>
                <Img src={img} alt={alt} />
              </ImgWrap>
      ...
    </>
  );
};

export default InfoSection;

Jian Zhong · Accepted Answer · 2021-11-02 01:56:13Z

1

Need add .default after require(""). like require("").default

export const homeObjOne = {
    id: "about",
    ...
    imgStart: false,
    img: require("../../../images/svg-1.svg").default,
    alt: "Car",
    ...
};

answered Nov 2, 2021 at 1:56

Jian Zhong

5014 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mr_Droid Over a year ago

Awsome it worked! Thank you.

Collectives™ on Stack Overflow

Trouble Importing Image React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related