Image not showing up JavaScript

Question

I am in the process of creating an ecommerce website in JavaScript I can't figure out why my image isn't showing up in my localhost.

All of my images are located in an images file which in turn is located in my src.

I can't seem to figure out what I'm doing wrong and can't seem to find similar issues.

import React from "react";
import "./App.css";
import Header from "./Header";

function App() {
  return (
    //BEM
    <div className="app">
      <h1>test</h1>
      <Header />
      {/*Home*/}
    </div>
  );
}

export default App;

import React from "react";
import "./Header.css";

function Header() {
  return (
    <div className="header">
      <img className="header__logo" src="images/nat6.jpg" alt="logo" />
      <div className="header__search">
        <input className="header__searchInput" type="text" />
        {/*Logo*/}
      </div>
      <div className="header__nav">
        <div className="header__option">
          <span className="header__optionLineOne">Hello Guest</span>
          <span className="header__optionLineOne">Sign In</span>
        </div>
        <div className="header__option">
          <span className="header__optionLineOne">Returns</span>
          <span className="header__optionLineOne">Orders</span>
        </div>
        <div className="header__option">
          <span className="header__optionLineOne">Premium</span>
          <span className="header__optionLineOne">Services</span>
        </div>
      </div>
    </div>
  );
}

export default Header;

Check the network tab in developer tools, does it show any error? — Guerric P, Aug 20 '21 at 18:49
Is the `images` directory getting served by your server? You could check it out by opening http://localhost/images/nat6.jpg . (Replace localhost by the server you are using) — Utkarsh Dixit, Aug 20 '21 at 18:50

score 1 · Accepted Answer · answered Aug 20 '21 at 18:53

1

Assuming you used Create React App in order to set up your development environment, you should put the images inside the public folder. Everything else is not considered a server resource but a React route so it returns index.html instead of the image.

answered Aug 20 '21 at 18:53

Guerric P

30,447
6
48
86

This is the same as [this answer](https://stackoverflow.com/a/61783390/215552) from the proposed duplicate... – Heretic Monkey Aug 20 '21 at 19:12

score 0 · Answer 2 · answered Aug 20 '21 at 18:55

You will need to do this when working with React.js: import image from "./your-image-path.png" and this img src={image} alt="Image" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from "react";
import image from "./your-image-path.png"

function App() {
  return (
    <div className="app">
    <img src={image} alt="Image" />
  );
}

export default App;

score 0 · Answer 3 · answered Aug 20 '21 at 18:57

0

Try to import your img:

import img from "..."

and add to you src:

<img className="header__logo" src={img} alt="logo" />

answered Aug 20 '21 at 18:57

SantGT5

53
4

Image not showing up JavaScript

3 Answers3