0

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

2 Answers 2

2

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.

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

Comments

1

Replace your <img> tag with

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

1 Comment

I tried the code and it is giving an error: Line 13:6: 'Image' is not defined react/jsx-no-undef. I tried to import the image using: import Img1 from "/Images/Img1.jpg". Still there is an error

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.