Image is not loading while using React

Question

I am trying to build a site using react.js and I was able to render the picture but I am not able to view the picture. I need some help. I am creating a website for a client. I am trying to render the image from Header.jsx. The picture is saved in public/Images/Img1.jpg. I have a component folder which as App.jsx, CreateArea.jsx, Header.jsx, Footer.jsx and Navbar.jsx.

[Error with pic

import React from "react";
import NavbarHeader from "./Navbar";



function Header() {
  return (
    <header>
    <NavbarHeader
    />
    <h1>SyncTech Solutions- Take your business beyond the four walls. </h1>
    <img src = "/Images/Img1.jpg"></img>
    </header>
  );
}

export default Header;

]1

Answer 1

You need to use

<img src={`${process.env.PUBLIC_URL}/Images/Img1.jpg`} />

for using images from public folder.

process.env.PUBLIC_URL will store your public url... The one which you access with %PUBLIC_URL% in the index.html file.

You could use require or import syntax if your image was inside src folder since it would be processed by webpack then.

But process.env.PUBLIC_URL seems to be the correct option in your case.

Answer 2

Replace your <img> tag with

<Image source={require('./Images/Img1.jpg')} />