Comment résoudre les problèmes de chemin d'image avec React Router dans React.js ?

Résolution du chemin Img dans React.js

Dans React.js, l'attribut src du L'élément doit contenir l'URL de l'image. Cependant, il semble que dans certains cas, les chemins relatifs ne sont pas résolus correctement, notamment dans le contexte de React Router.

Considérez la structure de fichier suivante :

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

Dans file1.jsx , le code suivant est utilisé pour afficher une image :

localhost/details/2
<img src="../img/myImage.png" /> <!-- works -->

localhost/details/2/id
<img src="../img/myImage.png" /> <!-- doesn't work -->

Comme vous l'avez observé, le chemin relatif fonctionne dans le premier cas mais pas dans le second cas. En effet, le chemin relatif est résolu en fonction de l'URL et non de l'architecture du fichier.

Pour garantir que les images s'affichent correctement quel que soit l'itinéraire, une solution consiste à importer les images en utilisant la syntaxe suivante :

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={&quot;logo&quot;}/> 
        )  
    }
}

En important l'image, vous vous assurez qu'il s'agit d'une ressource groupée et qu'elle sera disponible dans tous les composants, quel que soit l'itinéraire actuel.

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!