Etiqueta de imagen en React
Rana Hasnain Khan
18 abril 2022
Presentaremos cómo agregar una imagen en React.
Etiqueta de imagen en React
Primero agregaremos un div
con clase root
en el archivo index.html
.
# react
<div id="root"></div>
En el archivo index.tsx
definiremos el name
, la url
y el title
de la imagen.
# react
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
interface AppProps { }
interface AppState {
name: string;
url: string;
title: string;
}
class App extends Component<AppProps, AppState> {
constructor(props) {
super(props);
this.state = {
name: 'React',
url: 'https://images.pexels.com/photos/8549835/pexels-photo-8549835.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
title: "Vase Image"
};
}
render() {
return ();
}
}
render(<App />, document.getElementById('root'));
Hemos tomado una foto de ejemplo. Ahora devolveremos una imagen pasando valores en la etiqueta de la imagen.
# react
<div>
<img src={this.state.url} alt={`${this.state.title}'s picture`} className="img-responsive" />
<span>Hello {this.state.name}</span>
</div>
Entonces, nuestro código en index.tsx
se verá como el de abajo.
# react
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
interface AppProps { }
interface AppState {
name: string;
url: string;
title: string;
}
class App extends Component<AppProps, AppState> {
constructor(props) {
super(props);
this.state = {
name: 'React',
url: 'https://images.pexels.com/photos/8549835/pexels-photo-8549835.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
title: "Vase Image"
};
}
render() {
return (
<div>
<img src={this.state.url} alt={`${this.state.title}'s picture`} className="img-responsive" />
<span>Hello {this.state.name}</span>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Agreguemos un código CSS para cambiar el tamaño de nuestra imagen.
# react
.img-responsive{
width: 90vw;
}
Producción:
Ahora podemos ver que hemos agregado imágenes fácilmente en React.
Autor: Rana Hasnain Khan
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn