Balise d'image dans React

Rana Hasnain Khan 15 février 2024

React React Image

Nous allons vous présenter comment ajouter une image dans React.

Balise d’image dans React

Dans un premier temps, nous allons ajouter un div de classe root dans le fichier index.html.

# react
<div id="root"></div>

Dans le fichier index.tsx, nous définirons le name, url, et title de l’image.

# 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'));

Nous avons pris une photo d’exemple. Nous allons maintenant renvoyer une image en passant des valeurs dans la balise image.

# react
<div>
           <img src={this.state.url} alt={`${this.state.title}'s picture`}  className="img-responsive" />
           <span>Hello {this.state.name}</span>
        </div>

Ainsi, notre code dans index.tsx ressemblera à celui ci-dessous.

# 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'));

Ajoutons du code CSS pour redimensionner notre image.

# react
.img-responsive{
  width: 90vw;
}

Production :

React à la balise d’image

Nous pouvons maintenant voir que nous avons facilement ajouté des images dans React.

Auteur: 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.

Balise d’image dans React

Article connexe - React Image