Corriger le chemin de l'image dans React.js

Question

Je rencontre des problèmes avec les images de mon projet React. En fait, j'ai toujours pensé que le chemin relatif dans l'attribut src était construit sur la base du schéma du fichier.

Voici la structure de mes fichiers :

composants
    fichier1.jsx
    fichier2.jsx
    fichier3.jsx
récipient
img
js
...</pré>

<p>Cependant, j'ai réalisé que le chemin est construit en fonction de l'URL. Dans l'un de mes composants (par exemple file1.jsx), j'ai le code suivant : </p>

<pre class="brush:php;toolbar:false;">localhost/details/2
<img src="../img/myImage.png" /> fonctionne normalement

localhost/détails/2/id
<img src="../img/myImage.png" /> -> ne fonctionne pas, l'image ne peut pas être affichée

Comment résoudre ce problème ? Je souhaite que toutes les images soient affichées avec le même chemin dans n'importe quel formulaire de routage géré par React-Router.

Answer 1

Dans create-react-app, il semble que vous ne puissiez pas utiliser de chemins relatifs pour référencer des images. Au lieu de cela, vous pouvez utiliser l'importation pour importer des images :

import logo from './logo.png' // 图片的相对路径

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

Answer 2

Vous utilisez une URL relative, qui est relative à l'URL actuelle et non au système de fichiers. Vous pouvez résoudre ce problème en utilisant une URL absolue

<img src="http://localhost:3000/details/img/myImage.png" />

Cependant, ce n'est pas idéal lorsque vous déployez sur www.my-domain.bike ou tout autre site. Une meilleure approche consiste à utiliser une URL relative à la racine du site

<img src="/details/img/myImage.png" />