créer réagir application ne charge pas les css, les images de fond en dev ou de construire

Je vais avoir de la difficulté avec certaines images de fond, pas de chargement. J'ai fait quelques modifications significatives de la création initiale de réagir app, ma structure de dossier est maintenant comme suit:

Remarque: j'ai omis certains fichiers & dossiers, si vous avez besoin de plus s'il vous plaît laissez-moi savoir.

App/
 node_modules/
 src/
  client/
   build/
   node_modules/
   public/
   src/
    css/
     App.css
    images/
     tree.png
     yeti.png
    App.jsx
  server/
 package.json
 Procfile

Voici les mesures que je prends pour créer cette question:

$ cd src/server && npm run dev

Cela va démarrer le serveur de dev et ouvrez le navigateur de mon application, tout fonctionne bien sauf pour quelques éléments sur la page, pas l'affichage d'une image.

Note: je charge une image yeti.png et cela rend très bien.

App.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import './css/App.css';
import yeti from './images/yeti.png';

const Footer = function(props) {
  return (
    <div>
      <Yeti />
      <Trees />
    </div>
    );
};

const Yeti = function(props) {
  return (        
      <img
        src={yeti}
        className="yeti yeti--xs"
        alt="Yeti"
      />
    );
};

const Trees = function(props) {
  return (        
      <div className="trees">
        <div className="trees__tree trees__tree--1"></div>
        <div className="trees__tree trees__tree--2"></div>
      </div>
    );
};

ReactDOM.render(
  <Footer />,
  document.getElementById('root')
);

App.css

.trees {
    bottom: 0;
    height: 110px;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 1;
}

.trees__tree {
    background-size: 30px;
    background: url('../images/tree.png') no-repeat;
    float: left;
    height: 50px;
    width: 30px;
}

.trees__tree--1 {
    margin: 0 0 0 6%;
}

.trees__tree--2 {
    margin: 2% 0 0 4%;
}

Quand j'ai inspecter les éléments en Chrome, le chemin vers les images semble être correcte. Quand j'ai passez la souris sur le chemin de l'image dans l'onglet styles de mon inspecteur de l'image apparaît.

Notez que le chemin d'accès pour l'image je l'importation est similaire pour le chemin d'accès pour l'image de fond:

Si j'étais à importer les tree.png comme import tree from './images/tree.png'; et changer mes deux <div> éléments de <img src={tree} role="presentation" className="trees__tree trees__tree--1" /> et <img src={tree} role="presentation" className="trees__tree trees__tree--2" /> les images de la charge de cours.

Comment puis-je obtenir les images de fond d'écran? J'ai d'autres images d'arrière-plan dans l'application qui ne sont pas de chargement de sorte que le mentionné précédemment bandaid ne m'aidera pas. J'ai peur pour l'éjecter de mon appli et le désordre de la configuration.

Je suis aussi le même problème quand j'construire l'application.

Si vous avez besoin de voir plus de la source vous pouvez les voir sur https://github.com/studio174/ispellits mais bare à l'esprit, j'ai simplifié de cet exemple pour isoler le problème. La question que je vais avoir est en fait dans le Footer.jsx et Footer.css

OriginalL'auteur j_quelly | 2016-12-01