Warum kann ich keine lokalen Bilder in meine React-App laden?

Lokale Bilder werden in React-App nicht geladen

Hintergrund:

Lokale Bilder werden in React-Apps manchmal trotzdem nicht geladen Externe Bilder werden erfolgreich gerendert. Dies kann ein frustrierendes Problem sein, insbesondere für Entwickler, die für Design und Funktionalität auf lokale Bilder angewiesen sind.

Fehlerbehebung:

Das Problem liegt oft in der Art und Weise, wie Bilder beschafft werden in der React-Anwendung. Hier ist der Grund:

• Webpack-Integration: Bei der Verwendung von Webpack in einem React-Projekt müssen Bilder explizit erforderlich sein, bevor Webpack ihre Quellpfade verarbeiten und ersetzen kann.
• Probleme mit dem Dateipfad: Die einfache Angabe eines relativen oder absoluten Dateipfads für das Bild im src-Attribut reicht nicht aus funktioniert.

Lösung:

Um dieses Problem zu beheben, verwenden Sie die Funktion require(), um lokale Bilder zu importieren. Hier ist ein Beispiel:

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="home-container">
                <div className="home-content">
                    <div className="home-text">
                        <h1>foo</h1>
                    </div>
                    <div className="home-arrow">
                        <p className="arrow-text">
                            Vzdělání
                        </p>
                        <img src={require('/images/resto.png')} />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

Durch die Verwendung von require('/images/resto.png') weisen Sie Webpack an, das Bild zu verarbeiten und den Quellpfad entsprechend zu ersetzen. Dadurch wird sichergestellt, dass das Bild ordnungsgemäß geladen und in der Anwendung angezeigt wird.

Das obige ist der detaillierte Inhalt vonWarum kann ich keine lokalen Bilder in meine React-App laden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!