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 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 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 work, images are not displayed

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

Vous utilisez une URL relative, qui est relative à l'url actuelle, pas 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 génial lorsque vous déployez sur www.my-domain.bike ou sur tout autre site. Mieux vaut utiliser une url relative au répertoire racine du site

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

Dans create-react-apples 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"}/> 
        )  
    }
}

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

public / images /

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

Avec create-react-appil y a un dossier public (avec index.html ...). Si vous placez votre "myImage.png" là, disons sous le sous-dossier img , alors vous pouvez y accéder via:

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

1. Créez un dossier images dans src (/ src / images) et gardez votre image dedans. Importez ensuite cette image dans votre composant (utilisez votre chemin relatif). Comme ci-dessous-

   import imageSrc from './images/image-name.jpg';

   Et puis dans votre composant.

   <img title="my-img" src={imageSrc} alt="my-img" />

2. Une autre méthode consiste à conserver les images dans un dossier public et à les importer en utilisant un chemin relatif. Pour cela, créez un dossier d'images dans un dossier public et conservez-y votre image. Et puis dans votre composant, utilisez-le comme ci-dessous.

   <img title="my-img" src='/images/my-image.jpg' alt="my-img" />

   Les deux méthodes fonctionnent, mais la première est recommandée car sa manière plus propre et les images sont gérées par webpack pendant la construction.

dans mon cas, le code suivant fonctionne aussi.

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

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 html:

<img id="imglogo" src="/charts/logo.svg" />

En JavaScript:

Créer une image vers une nouvelle img, dynamiquement:

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

Définissez l'image sur img existante avec l'ID comme 'img1', de manière dynamique:

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;  

Dans jsx:

<img src={logo} /> 

Ajout du chargeur de fichiers npm à webpack.config.js selon ses instructions d'utilisation officielles comme ceci:

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

travaillé pour moi.

Importez des images dans votre composant

import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'

Et appelez le nom de l'image sur l'image src = {RecentProjectImage_3} en tant qu'objet

 <Img src={RecentProjectImage_3} alt="" />

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

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

Placez le logo dans votre dossier public sous par exemple public / img / logo.png, puis reportez-vous au dossier public en tant que% 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 publicdossier lors de la construction. Seuls les fichiers à l'intérieur du publicdossier peuvent être référencés à partir du HTML.

Contrairement à "/img/logo.png" ou "logo.png", "% PUBLIC_URL% / img / logo.png" fonctionnera correctement à la fois avec le routage côté client et une URL publique non root. Découvrez comment configurer une URL publique non root en exécutant npm run build.