0
418
ViewsCómo importar una imagen (.svg, .png) en un componente React
Estoy tratando de importar un archivo de imagen en uno de mis componentes de reacción. Tengo la configuración del proyecto con el paquete web.
Aquí está mi código para el componente.
import Diamond from '../../assets/linux_logo.jpg'; export class ItemCols extends Component { render(){ return ( <div> <section className="one-fourth" id="html"> <img src={Diamond} /> </section> </div> ) } }Aquí está la estructura de mi proyecto.
He configurado mi archivo webpack.config.js de la siguiente manera
{ test: /\.(jpg|png|svg)$/, loader: 'url-loader', options: { limit: 25000, }, }, { test: /\.(jpg|png|svg)$/, loader: 'file-loader', options: { name: '[path][name].[hash].[ext]', }, },PD. Puedo obtener imágenes de cualquier otra fuente remota, pero no imágenes guardadas localmente. La consola de JavaScript tampoco me da ningún error. Por favor, cualquier cosa ayuda. Soy bastante nuevo para reaccionar y no puedo encontrar lo que estoy haciendo mal.
·
Santiago Trujillo
3 answers
Answer question0
intenta usar
import mainLogo from'./logoWhite.png'; //then in the render function of Jsx insert the mainLogo variable class NavBar extends Component { render() { return ( <nav className="nav" style={nbStyle}> <div className="container"> //right below here <img src={mainLogo} style={nbStyle.logo} alt="fireSpot"/> </div> </nav> ); } }
·
Santiago Trujillo
Report
0
También puede usar require para renderizar imágenes como
//then in the render function of Jsx insert the mainLogo variable class NavBar extends Component { render() { return ( <nav className="nav" style={nbStyle}> <div className="container"> //right below here <img src={require('./logoWhite.png')} style={nbStyle.logo} alt="fireSpot"/> </div> </nav> ); } }
·
Santiago Trujillo
Report
0
Si las imágenes están dentro de la carpeta src/assets, puede usar require con la ruta correcta en la instrucción require,
var Diamond = require('../../assets/linux_logo.jpg'); export class ItemCols extends Component { render(){ return ( <div> <section className="one-fourth" id="html"> <img src={Diamond} /> </section> </div> ) } }
·
Santiago Trujillo
Report
Answer question