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;
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.
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;Try to import your img:
import img from "..."
and add to you src:
<img className="header__logo" src={img} alt="logo" />