No puedo mostrar la imagen y aparece un error como no encontrado, pero proporcioné la ruta completa para ello. No sé dónde me estoy equivocando.
class App extends React.Component { render() { return ( <div> <h1> hello</h1> <img src="/home/priyanka/Finalproject/src/components/3.jpg" alt="cannot display"/> </div> ); } } export default App;Si está utilizando webpack , debe usar require mientras menciona el src para la etiqueta img . Además, la URL debe ser relativa al componente.
class App extends React.Component { render() { return ( <div> <h1> hello</h1> <img src={require("./home/priyanka/Finalproject/src/components/3.jpg")} alt="cannot display"/> </div> ); } } export default App; Si no está utilizando un paquete web, simplemente envolver el valor src dentro de {} funcionará
class App extends React.Component { render() { return ( <div> <h1> hello</h1> <img src={"./home/priyanka/Finalproject/src/components/3.jpg"} alt="cannot display"/> </div> ); } } export default App;Puedes leer ¿Por qué no puedo hacer <img src="C:/localfile.jpg">? para saber por qué no funciona.
Si usa el siguiente método
import img from "/home/priyanka/Finalproject/src/components/3.jpg"; class App extends React.Component { render() { return ( <div> <h1> hello</h1> <img src={img} alt="cannot display"/> </div> ); } } export default App;digamos que tiene su carpeta de images dentro de la carpeta public .
tratar:
<img src={process.env.PUBLIC_URL + "/images/dog.png"}