Html Question posted in
Some basic documentation can be found here.

Html – Why isn't my image showing in my react project?

I just started learning React and I’m trying to build a static HTML page. Everything works fine except the React logo image which has refused to show.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    
    <script src="index.js"></script>
  </body>
</html>

import React from "react"
import ReactDOM from "react-dom/client"

const page = (
  <div>
    <img src="first-project/public/logo512.png" width="40px"/>
    <h1>Fun facts about React</h1>
    <ul>
      <li>Was released in 2013</li>
      <li>Was originally created by Jordan Walke</li>
      <li>Has well over 100k stars on Github</li>
      <li>Is maintained by facebook</li>
      <li>Powers thousands of enterprise apps, including mobile apps</li>
    </ul>
  </div>
)

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(page)

I copied the image from my public folder and for some reason it does not display properly on the web browser.

The image below shows how the image appears on the webpage

enter image description here

The image below shows my IDE:

enter image description here

Tags:

3

Answers


  1. 0

    Udate your image url as

        <img src="/first-project/public/logo512.png" width="40px"/>

    if you want to use your method, add images in src folder only, which is not recommended.

    Login or Signup to reply.
  2. 0

    Try use /public/logo512.png as image url.

    <img src="/public/logo512.png" width="40px"/>

    This should be correct path.

    Login or Signup to reply.
  3. 0

    Simply use

    <img src="logo512.png" width="40px"/>

    React by default points assets from public folder.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search