web-dev-qa-db-fra.com

Chemin correct pour img sur React.js

J'ai des problèmes avec mes images sur mon projet de réaction. En effet, j'ai toujours pensé que le chemin relatif dans l'attribut src était basé sur l'architecture des fichiers

Voici mon architecture de fichiers:

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

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

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

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

Comment est-il possible de résoudre ce problème? Je veux que, quelle que soit la forme de route gérée par react-router, toutes les images peuvent être affichées avec le même chemin.

javascriptreactjswebpack
89
onedkr

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

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

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

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

61
prekolna

Ne pas essayer de répondre à la question - juste une note que dans create-rea-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"}/> 
        )  
    }
}
263
claireablani

Si vous avez utilisé create-react-app pour créer votre projet, votre dossier public est accessible. Vous devez donc ajouter votre dossier image à l’intérieur du dossier public.

public/images /

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

69
Rubel hasan

Avec create-react-app, il existe un dossier public (avec index.html ...). Si vous placez votre "myImage.png" à cet emplacement, sous le sous-dossier img, vous pourrez y accéder via:

<img src={window.location.Origin + '/img/myImage.png'} />
37
Dima Gershman

dans mon cas, le code suivant fonctionne aussi.

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

Je recommanderais d'utiliser le chemin relatif traditionnel. Vous pouvez utiliser comme ceci ci-dessous dans l'image. Nous pouvons mettre n'importe quoi dans ce dossier public et cibler ce dossier pour accéder à images, videos et ainsi de suite ... Cette configuration est effectuée par react lui-même. Pour cela, conservez vos images dans un dossier public. Ainsi...

enter image description here

Et que dans votre jsx.

<img src="images/pitbull-mark.png" />
20
Asif J

Certaines réponses plus anciennes ne fonctionnent pas, d'autres sont bonnes mais n'expliquent pas le thème, en résumé:

Si l'image est dans le répertoire 'public'

Exemple: \public\charts\a.png

En JavaScript:

Créer une image pour new img, dynamiquement:

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';

Définissez l'image sur img existant avec id comme "img1", dynamiquement:

document.getElementById('img1').src = 'charts/a.png';

Si l'image est dans le répertoire 'src':

Exemple: \src\logo.svg

En JavaScript:

import logo from './logo.svg';  
img1.src = logo;

En jsx:

<img src={logo} />
6
Manohar Reddy Poreddy

Ajouter chargeur de fichier npm à webpack.config.js conformément à ses instructions d'utilisation officielles, comme suit:

config.module.rules.Push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

a travaillé pour moi.

3
Treefish Zhang

Un ami m'a montré comment procéder comme suit:

"./" fonctionne lorsque le fichier demandant l'image (par exemple, "exemple.js") se trouve au même niveau que l'arborescence de dossiers dans le dossier "images".

1
AdamJSim

Placez le logo dans votre dossier public sous, par exemple. public/img/logo.png, puis faites référence au dossier public sous le nom% PUBLIC_URL%:

<img src="%PUBLIC_URL%/img/logo.png"/>

L'utilisation de% PUBLIC_URL% dans ce qui précède sera remplacée par l'URL du dossier public lors de la construction. Seuls les fichiers contenus dans le dossier public peuvent être référencés à partir du code HTML.

Contrairement à "/img/logo.png" ou à "logo.png", "% PUBLIC_URL%/img/logo.png" fonctionnera correctement avec un routage côté client et une URL publique non racine. Apprenez à configurer une URL publique non root en exécutant npm run build.

0
Sami Start