Estoy en el proceso de crear un sitio web de comercio electrónico en JavaScript. No puedo entender por qué mi imagen no aparece en mi servidor local.
Todas mis imágenes se encuentran en un archivo de imágenes que a su vez se encuentra en mi src.
Parece que no puedo darme cuenta de lo que estoy haciendo mal y parece que no puedo encontrar problemas similares.
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;Suponiendo que utilizó Create React App para configurar su entorno de desarrollo, debe colocar las imágenes dentro de la carpeta public . Todo lo demás no se considera un recurso del servidor sino una ruta React, por lo que devuelve index.html en lugar de la imagen.
Deberá hacer esto cuando trabaje con React.js: importe la imagen desde "./your-image-path.png" y este 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;Intenta importar tu img:
importar img desde "..."
y agregar a usted src:
<img className="header__logo" src={img} alt="logo" />