Image-Tag in React
Rana Hasnain Khan
15 Februar 2024
React
React Image
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.
Genießen Sie unsere Tutorials? Abonnieren Sie DelftStack auf YouTube, um uns bei der Erstellung weiterer hochwertiger Videoanleitungen zu unterstützen. Abonnieren
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