ReactJS not reading img tag src

Question

I have this component

     import leftArrow from "../../../../../assets/svg/left.svg";

    export const LeftArrow = (props) => {
  const {className, style, onClick} = props
  return (
    <div
      className="slick-arrow"
      style={{...style, display: 'block'}}
      onClick={onClick}
    >
      <img src={leftArrow} alt="arrow_left"/>
    </div>
  );
}

I'm making custom arrows for the react-slick carousel, The problem is images are not being displayed. The path is right but the images are .svg icons. I'm also using babel. Any solutions, please?

It just displays undefined picture with alt "arrow left"

Can you show how you are importing leftArrow? – Slim Sep 25 '20 at 08:16 — Slim, Sep 25 '20 at 08:16
where is leftArrow being imported from? – zubair1024 Sep 25 '20 at 08:17 — zubair1024, Sep 25 '20 at 08:17
Sorry i will update it right now – Nika Roffy Sep 25 '20 at 08:33 — Nika Roffy, Sep 25 '20 at 08:33

score 1 · Answer 1 · edited Sep 25 '20 at 08:29

1

You forgot to declare the leftArrow path and that is why it is not displaying you the image.

 export const LeftArrow = (props) => {
  const leftArrow = 'path_of_img'
  const {className, style, onClick} = props
  return (
    <div
      className={className}
      style={{...style, display: 'block'}}
      onClick={onClick}
    >
      <img src={leftArrow} alt="arrow_left"/>
    </div>
  );
}

Minor adjustments - You are getting className from props but are not using it.

edited Sep 25 '20 at 08:29

Dharman

30,962
25
85
135

answered Sep 25 '20 at 08:23

Utkarsh Goel

175
13

Thank you for your answer,But it is still not showing – Nika Roffy Sep 25 '20 at 08:36
Try using my syntax. I am not sure if import works like that. Try adding this line const leftArrow = '../../../../../assets/svg/left.svg' – Utkarsh Goel Sep 25 '20 at 09:25

score 1 · Answer 2 · answered Sep 25 '20 at 09:33

You are using the import wrong way. Try this

 export const LeftArrow = (props) => {
  const leftArrow = "../../../../../assets/svg/left.svg";
  const {className, style, onClick} = props;
  return (
    <div
      className={className}
      style={{...style, display: 'block'}}
      onClick={onClick}
    >
      <img src={leftArrow} alt="arrow_left"/>
    </div>
  );
}

ReactJS not reading img tag src

2 Answers2