13

一部の背景画像が読み込まれないという問題が発生しています。最初の作成した反応アプリにいくつかの大幅な変更を加えました。フォルダー構造は次のようになりました。

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

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 で要素を調べると、画像へのパスが正しいように見えます。インスペクターのスタイルタブで画像へのパスにカーソルを合わせると、画像が表示されます。

スタイルソース

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

ここに画像の説明を入力

tree.pngasをインポートして 2 つの要素を にimport tree from './images/tree.png';変更すると、もちろん画像が読み込まれます。<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

4

3 に答える 3

14

この問題は、純粋に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;
}
于 2016-12-02T01:01:15.960 に答える