web-dev-qa-db-fra.com

créer une application qui ne charge pas les images d'arrière-plan css dans dev ou build

Je ne parviens pas à charger certaines images d'arrière-plan. J'ai apporté quelques modifications significatives à l'application de création initiale, la structure de mes dossiers est maintenant la suivante:

Remarque: j'ai omis certains fichiers et dossiers, si vous avez besoin de plus d'informations, merci de me le faire 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 étapes à suivre pour créer ce numéro:

$ cd src/server && npm run dev

Cela démarrera le serveur de développement et ouvrira le navigateur à mon application. Tout fonctionne correctement, à l'exception de certains éléments de la page qui ne présentent pas d'image.

Note: Je charge dans une image yeti.png et le rendu est bon.

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

Lorsque j'inspecte les éléments dans Chrome, le chemin d'accès aux images semble être correct. Lorsque je survole le chemin de l'image dans l'onglet Styles de mon inspecteur, l'image apparaît.

 styles source

Notez que le chemin de l'image que j'importe est similaire à celui de l'image d'arrière-plan:

 enter image description here

Si je devais importer le tree.png en tant que import tree from './images/tree.png'; et changer mes deux éléments <div> en <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 se chargeront bien sûr. 

Comment puis-je obtenir les images de fond pour afficher? J'ai d'autres images d'arrière-plan dans l'application qui ne se chargent pas, de sorte que le bandaid mentionné précédemment ne m'aidera pas. J'ai peur d'éjecter mon application et de gâcher la configuration.

J'ai également le même problème lorsque je construis l'application.

Si vous avez besoin de voir plus de la source, vous pouvez la voir à https://github.com/studio174/ispellits mais gardez bien à l'esprit que j'ai simplifié cet exemple pour isoler le problème. Le problème que je rencontre est en réalité dans le Footer.jsx et le Footer.css

javascriptreactjsecmascript-6jsxcreate-react-app
6
j_quelly

Le problème était purement lié à CSS dans le fichier App.css:

App.css 

.trees__tree {    
    background: url('../images/tree.png') no-repeat;
    background-size: 30px; /** moved this property down */
    float: left;
    height: 50px;
    width: 30px;
}
8
j_quelly

Mon problème était précisément que je n'avais pas défini background-size: 30px;. Merci pour cela.

1
IonicBurger