Problems with loading image directly onto index.html in create-react-app

Question

I wish to have an entire html page and then a small section that uses React. I know there are better ways to do it than use create-react-app, but currently that is what I'm using. File directory is as such.

public
    index.html 
src
    assets
        images
            logo.png

    components 
    index.js
    index.css

I have not touched much of the original index.html except to add the content inside the header tag. I wish to display an image inside the HTML, but currently it is only showing the alt text.

<!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="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster+Two:100,300,400,700,900">
  <link rel="apple-touch-icon" href="logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>My website</title>
</head>

<body>
  <header class="header">
    <div class="logo-box">
      // I cannot display the image at this part, I am pretty sure the link is correct.
      <img src="/mywebsite/src/assets/images/logo.png" alt="Logo" class="logo"> 
    </div>
  </header>

  <div id="root"></div> // react section will go here
</body>
</html>

Could you provide the error that you're getting as well as what are you trying to achieve. — dvr
– dvr, Commented Nov 23, 2019 at 7:36
there is no error, the image does not show at all, and only shows the alt text. I just wish to add an image into the header tag and have it display on the HTML — JXKENG
– JXKENG, Commented Nov 23, 2019 at 7:37
If you're using chrome you can open developer tools and right click over the source of the img tag and open it in a new tab, this will help you to be sure if the link is correct. — dvr
– dvr, Commented Nov 23, 2019 at 7:39

Chris Chen · Accepted Answer · 2019-11-23 07:50:23Z

1

Are you trying to display images when running npm start? If so you will need to move assets into the public folder and then refer them in localhost.

Reference: https://create-react-app.dev/docs/using-the-public-folder

If you are planning to bundle and deploy assets when you build the code I recommend you to read through https://webpack.js.org/guides/asset-management/ since create-react-app is using webpack to deploy by default.

edited Nov 23, 2019 at 7:50

answered Nov 23, 2019 at 7:48

Chris Chen

1,3039 silver badges15 bronze badges

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

3 Comments

Chris Chen Over a year ago

have you move assets into the public folder and try to refer then using relative paths?

JXKENG Over a year ago

my index.css file currently references some images from src/assets/images so that means I will probably have to create public/images as well.. makes it quite messy. Maybe i will look into webpack

JXKENG Over a year ago

what you suggested works, hopefully I wont need to touch webpack for a while, it seems complicated HAHA

Collectives™ on Stack Overflow

Problems with loading image directly onto index.html in create-react-app

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related