Pourquoi ne puis-je pas charger des images locales dans mon application React ?

Les images locales ne se chargent pas dans l'application React

Arrière-plan :

Les images locales ne parviennent parfois pas à se charger dans les applications React, malgré rendu des images externes avec succès. Cela peut être un problème frustrant, en particulier pour les développeurs qui s'appuient sur des images locales pour la conception et les fonctionnalités.

Dépannage :

Le problème réside souvent dans la manière dont les images proviennent dans l'application React. Voici pourquoi :

• Intégration de Webpack : Lors de l'utilisation de Webpack dans un projet React, les images doivent être explicitement requises avant que Webpack puisse traiter et remplacer leurs chemins sources.
• Problèmes de chemin de fichier : Le simple fait de fournir un chemin de fichier relatif ou absolu pour l'image dans l'attribut src ne suffira pas. work.

Solution :

Pour résoudre ce problème, utilisez la fonction require() pour importer des images locales. Voici un exemple :

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;

En utilisant require('/images/resto.png'), vous demandez à Webpack de traiter l'image et de remplacer le chemin source en conséquence. Cela garantit que l'image est correctement chargée et affichée dans l'application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!