Chemin d'accès Correct pour img sur React.js

J'ai un problème avec mes images sur mon réagir projet. En effet, j'ai toujours pensé que le chemin relatif dans l'attribut src a été construite sur l'architecture de fichiers

Voici mon architecture de fichiers:

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

Mais je me suis rendu compte que le chemin est construit sur l'url. Dans un de mes composant (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 dans toute forme de routes gérées par réagissent-routeur, toutes les images peuvent être affichées avec le même chemin.

  • il suffit de pointer directement à l'image, ne pas utiliser ../ whatever
  • Vous avez besoin d'utiliser require. Lire ce répondre sur DONC, pour plus d'info.
InformationsquelleAutor onedkr | 2016-06-05
  1. 58

    Vous utilisez une url relative, qui est relatif à l'url courante, pas le système de fichiers. Vous pourriez résoudre ce problème en utilisant des url absolues

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

    Mais ce n'est pas idéal lorsque vous déployez pour la http://www.my-domain.bike ou à tout autre site. Mieux serait d'utiliser une url relative au répertoire racine du site

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

    • Merci, je tiens à souligner le / qui précède details (vs ./details, etc, pour les autres, qui peut confondre les deux).
    • Je ne comprends pas pourquoi il est si difficile de montrer des images dans reactjs apps. De toute façon cette solution ne fonctionne pas pour moi.
    • Même pour moi, il ne fonctionne pas. Je suis à l'aide de reactjs avec cordova et à l'aide de ES5 comme eslint
    • Alors que les deux claireablani la solution de travail, claireablani est ce que le fait de créer réagir avec l'application docs recommander. Ils énumèrent un certain nombre d'avantages plus de mettre les ressources en public facebook.github.io/créer-réagir-app/docs/...
    • Ceci a bien fonctionné pour moi.
    • est droit. Souvenez-vous /images/popcorn.png et pas ./images/popcorn.png. A fonctionné pour moi avec toutes les routes et d'autres choses.

    InformationsquelleAutor prekolna
  2. 255

    Ne cherche pas à répondre à la question - juste une remarque que dans la création de réagir-app, des 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"}/> 
        )  
    }
}
    • qu'en dynamique des images, par exemple, référencé dans un fichier json, en créer de réaction-app?
    • Je pense que vous exportez la variable dans le fichier JSON, l'importation de la variable dans votre composant. Vous pouvez y faire référence comme d'habitude. par exemple, les exportations const my_src = variable_here, l'importation {my_src} de my_file, et src={my_src}.
    • import './styles/style.less'; **import logo from './styles/images/deadline.png';** J'obtiens l'erreur sur la 2e ligne de module introuvable alors que l'image existe & chemin d'accès est correct.
    • Ce doit être marqué comme réponse correcte
    • Vous avez sauvé la journée!
    • Cette méthode est également confirmé par survive.js si vous voulez prendre un coup d'oeil à l'un des principaux webpack de l'auteur méthodes. Il mentionne également que vous pouvez utiliser babel-plugin-transformer-réagir-jsx-img-import pour obtenir de l'avoir à importer l'image à chaque fois que vous faites référence à une image.
    • N'est pas cela, il ne résout qu'une question d'image, mais ne résout pas le problème de chemin d'accès.. Dima Gershman réponse est la réelle réagir solution pour le chemin de n'importe quel fichier img ou autre
    • C'est une bonne solution, tnx.

    InformationsquelleAutor claireablani
  3. 64

    Si vous avez utilisé créez-réagir-app pour créer votre projet, votre dossier public est accessible. Donc, vous devez ajouter votre image dossier dans le dossier public.

    public/images/

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

    • Ce doit être marqué comme de plus en plus populaire réponse. M'a fallu moins de 60 secondes pour mettre en œuvre & résolu mon problème immédiatement. Grâce Rubel!
    • Merci @ScottBarbour
    • C'est exact, et la réponse la plus simple !, tks u!
    • Merci, c'est parfait.
    • J'étais sur le point de poser une question, mais CETTE réponse a résolu mon problème!!! Doit être marqué comme réponse. Merci!!! +1
    InformationsquelleAutor Rubel hasan
  4. 36

    Avec create-react-app il est public dossier (avec index.html...).
    Si vous placez votre "myImage.png" il y, dire img sous-dossier, puis vous pouvez accéder par le biais de:

    <img src={window.location.origin + '/img/myImage.png'} />
    • Ce doit être marqué comme réponse correcte, car il est effectivement reactjs solution pour tous les types de chemins d'accès des fichiers
    • Je ne comprends pas pourquoi vous pensez que c'est la bonne réponse. J'ai juste essayé cette réponse et Claireblani réponse claire et la réponse de l'travaillé alors que ce n'était pas. Cette réponse ne fonctionne que si l'image est dans le dossier public. Mon images allez dans le dossier public? @Sami
    • Oui @Maderas première des choses est est cette réponse est la même que l'on a accepté un => il suffit de retirer {} et l'url de base que vous pouvez utiliser simplement src='/chemin relatif de l'image " ou src='chemin d'accès absolu de l'image" Quoi de plus dans cette réponse, c'est qu'elle tient compte de la variable de chemin d'accès pour les image
    InformationsquelleAutor Dima Gershman
  5. 20

    dans mon cas code suivant fonctionne aussi.

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

    Je vous recommande d'utiliser traditionnel chemin d'accès relatif. Vous pouvez l'utiliser comme en-dessous de l'image. On peut mettre n'importe quoi dans ce public dossier et peuvent cibler ce dossier pour accéder à images , videos et ainsi de suite... Cette installation est faite par réagir de lui-même.
    Pour cela garder vos images dans le dossier public. Comme si...

    Chemin d'accès Correct pour img sur React.js

    Et que dans votre jsx.

    <img src="images/pitbull-mark.png" />
    • ce qui m'a aidé 🙂
    • Cela ne fonctionne pas, une barre oblique ( / ) est nécessaire au début pour indiquer le chemin d'accès relatif, comme dans: "/images/pitbull-mark.png"
    • avez-vous essayé de celui mentionné dans la réponse? Cela devrait fonctionner aussi.
    InformationsquelleAutor Asif J
  7. 4

    Certains anciens réponses din fonctionnent pas, d'autres sont bons, mais ne vais pas expliquer le thème, en résumé:

    Si l'image est dans le "public" annuaire

    Exemple: \public\charts\a.png

    En JavaScript:

    Créer une image à de nouveaux img, de manière dynamique: 

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

    D'image existants img avec id 'img1', de manière dynamique: 

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

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

    Exemple: \src\logo.svg

    En JavaScript: 

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

    Dans jsx:

    <img src={logo} />
    InformationsquelleAutor Manohar Reddy Poreddy
  8. 3

    Ajoutant fichier-chargeur de mnp à webpack.config.js par son usage officiel de l'instruction comme suit:

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

    a fonctionné pour moi.

    • Merci. C'est ce qui manquait! Cheers!!!
    InformationsquelleAutor Treefish Zhang
  9. 1

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

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

    InformationsquelleAutor AdamJSim
  10. 0

    Placer le logo dans votre dossier public en vertu publique/img/logo.png, puis reportez-vous au dossier public en %PUBLIC_URL%:

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

    L'utilisation de %PUBLIC_URL% dans la ci-dessus sera remplacée par l'URL de la public dossier lors de la compilation. Seuls les fichiers à l'intérieur de la public dossier peut être référencé à partir de l'HTML.

    À la différence "/img/logo.png" ou "logo.png", "%PUBLIC_URL%/img/logo.png" fonctionnera correctement à la fois côté client de routage et d'un non-racine de l'URL publique. Apprendre à configurer un utilisateur non-root URL publique en exécutant npm run build.

    InformationsquelleAutor Sami Start