create reagieren app lädt nicht css hintergrundbilder in dev oder build

Ich habe Probleme mit einigen Hintergrundbildern, die nicht geladen werden. Ich habe einige wesentliche Änderungen an der ursprünglichen App zum Reaktivieren vorgenommen. Die Ordnerstruktur sieht nun folgendermaßen aus:

Hinweis: Ich habe einige Dateien und Ordner ausgelassen. Wenn Sie mehr benötigen, lassen Sie es mich wissen.

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

Hier sind die Schritte zum Erstellen dieses Problems:

$ cd src/server && npm run dev

Dadurch wird der Dev-Server hochgefahren und der Browser für meine App geöffnet. Alles funktioniert einwandfrei, mit Ausnahme einiger Elemente auf der Seite, die kein Bild anzeigen.

Hinweis: Ich lade ein Bild yeti.png und dies wird gut dargestellt.

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%;
}

Wenn ich die Elemente in Chrome untersuche, scheint der Pfad zu den Bildern korrekt zu sein. Wenn ich mit dem Mauszeiger über den Pfad zum Bild auf der Registerkarte Stile meines Inspektors fahre, wird das Bild angezeigt.

Beachten Sie, dass der Pfad für das importierte Bild dem Pfad für das Hintergrundbild ähnelt:

Wenn ich den tree.png als import tree from './images/tree.png'; importieren und meine beiden <div>-Elemente in <img src={tree} role="presentation" className="trees__tree trees__tree--1" /> und <img src={tree} role="presentation" className="trees__tree trees__tree--2" /> ändern würde, werden die Bilder natürlich geladen. 

Wie kann ich die Hintergrundbilder anzeigen lassen? Ich habe andere Hintergrundbilder in der App, die nicht geladen werden, so dass mir das zuvor erwähnte Bandaid nicht weiterhilft. Ich habe Angst, meine App auszuwerfen und die Konfiguration durcheinander zu bringen.

Ich habe auch das gleiche Problem, wenn ich die App baue.

Wenn Sie mehr von der Quelle sehen möchten, können Sie sie unter https://github.com/studio174/ispellits anzeigen. Aber im Hinterkopf, ich habe dieses Beispiel vereinfacht, um das Problem zu isolieren. Das Problem, das ich habe, ist tatsächlich in Footer.jsx und Footer.css