Image-Tag in React
Rana Hasnain Khan
15 Februar 2024
Wir werden vorstellen, wie man ein Bild in React hinzufügt.
Image-Tag in React
Zuerst fügen wir ein div mit der Klasse root in die Datei index.html ein.
# react
<div id="root"></div>
In der Datei index.tsx definieren wir name, url und title des Bildes.
# 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'));
Wir haben ein Beispielbild gemacht. Jetzt geben wir ein Bild zurück, indem wir Werte im Bild-Tag übergeben.
# react
<div>
<img src={this.state.url} alt={`${this.state.title}'s picture`} className="img-responsive" />
<span>Hello {this.state.name}</span>
</div>
Unser Code in index.tsx sieht also wie folgt aus.
# 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'));
Lassen Sie uns etwas CSS-Code hinzufügen, um die Größe unseres Bildes zu ändern.
# react
.img-responsive{
width: 90vw;
}
Ausgabe:
Wir können jetzt sehen, dass wir einfach Bilder in React hinzugefügt haben.
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