web-dev-qa-db-ja.com

devまたはbuildでCSSバックグラウンドイメージを読み込まない反応アプリを作成する

一部の背景画像を読み込めないのですが。最初のcreate react appにいくつかの重要な変更を加えました。私のフォルダー構造は次のようになりました。

注：ファイルとフォルダの一部を省略しました。必要な場合はお知らせください。

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

この問題を作成するための手順は次のとおりです。

$ cd src/server && npm run dev

これにより、開発サーバーが起動し、ブラウザーで私のアプリが開きます。画像が表示されていないページの一部の要素を除いて、すべて正常に機能しています。

注：画像yeti.pngをロードすると、正常にレンダリングされます。

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

Chromeで要素を検査すると、画像へのパスが正しいようです。インスペクタの[スタイル]タブで画像へのパスにカーソルを合わせると、画像が表示されます。

styles source

インポートする画像のパスは、背景画像のパスに似ていることに注意してください。

enter image description here

tree.pngをimport tree from './images/tree.png';としてインポートし、2つの<div>要素を<img src={tree} role="presentation" className="trees__tree trees__tree--1" />と<img src={tree} role="presentation" className="trees__tree trees__tree--2" />に変更すると、画像は当然ロードされます。

背景画像を表示するにはどうすればよいですか？アプリに他の背景画像が読み込まれていないため、前述の絆創膏は役に立ちません。私は自分のアプリをイジェクトして設定を混乱させることを恐れています。

アプリをビルドするときにも同じ問題が発生します。

より多くのソースを表示する必要がある場合は、 https://github.com/studio174/ispellits で表示できますが、問題を特定するためにこの例を単純化しました。私が抱えている問題は実際にはFooter.jsxとFooter.cssにあります

javascriptreactjsecmascript-6jsxcreate-react-app
9
j_quelly

この問題は、純粋にApp.cssファイルの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;
}
9
j_quelly

私の問題は特にbackground-size: 30px;定義されています。これをありがとう。

1
IonicBurger