HOWTO · React
Etiqueta de imagen en React
Este tutorial demuestra cómo agregar una imagen en React.
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.
