Chemin correct pour img sur React.js

Question

J'ai un problème avec mes images sur mon projet react. En effet, j'ai toujours pensé que le chemin relatif dans l'attribut src était construit sur l'architecture des fichiers.

Voici l'architecture de mes fichiers :

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

Cependant, j'ai réalisé que le chemin était construit sur l'url. Dans un de mes composants (par exemple dans file1.jsx) j'ai ceci :

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

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't works, images are not displayed

Comment est-il possible de résoudre ce problème ? Je veux que dans toutes les formes de routes gérées par react-router, toutes les images puissent être affichées avec le même chemin.

Answer 1

Je n'essaye pas de répondre à la question - juste une remarque que dans create-react-app, les chemins relatifs pour les images ne semblent pas fonctionner. Au lieu de cela, vous pouvez importer une image.

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

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

Answer 2

Si vous avez utilisé create-react-app pour créer votre projet alors votre dossier public est accessible. Vous devez donc ajouter votre image dans le dossier public.

public/images/

<img src="/images/logo.png" />

Answer 3

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 des urls absolues

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

Mais ce n'est pas génial pour le déploiement sur www.my-domain.bike, ou tout autre site. Il est préférable d'utiliser une URL relative au répertoire racine du site.

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

Answer 4

Avec create-react-app il y a public (avec index.html ...). Si vous placez votre "myImage.png" à cet endroit, disons sous img vous pourrez alors y accéder par le biais de ce sous-dossier :

<img src={window.location.origin + '/img/myImage.png'} />

Answer 5

Dans mon cas, le code suivant fonctionne également.

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>