13

I'm having difficulty with some background images not loading. I've made some significant modifications to the initial create react app, my folder structure is now as follows:

Note: I have omitted some files & folders, if you need more please let me know.

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

Here are the steps I take to create this issue:

$ cd src/server && npm run dev

This will boot up the dev server and open the browser to my app, everything is working fine except for some elements on the page not displaying a image.

Note: I load in an image yeti.png and this renders fine.

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

When I inspect the elements in Chrome, the path to the images appears to be correct. When I hover over the path to the image in the styles tab of my inspector the image appears.

styles source

Note that the path for the image I import is similar to the path for the background image:

enter image description here

If I were to import the tree.png as import tree from './images/tree.png'; and change my two <div> elements to <img src={tree} role="presentation" className="trees__tree trees__tree--1" /> and <img src={tree} role="presentation" className="trees__tree trees__tree--2" /> the images will of course load.

How can I get the background images to display? I have other background images in the app that are not loading so the previously mentioned bandaid will not help me. I'm afraid to eject my app and mess with the configuration.

I'm also having the same problem when I build the app.

If you need to see more of the source you can view it at https://github.com/studio174/ispellits but bare in mind I have simplied this example to isolate the problem. The issue I am having is actually in the Footer.jsx and Footer.css

4

3 回答 3

14

这个问题纯粹是App.css文件中的 CSS 问题：

应用程序.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 回答
2

我的问题特别是我没有background-size: 30px;定义。谢谢你。

于 2017-06-20T14:42:43.157 回答
-3

在 package.json 中添加主页以在任何 apache 服务器中运行构建

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://{servername}/{foldername}/",

}

然后使用在反应中创建构建

  1. npm run build
  2. npm install -g serve
  3. serve -s build
  4. 复制构建文件夹并粘贴到服务器中，如 xampp/htdocs 并点击 url
于 2019-01-02T13:25:22.887 回答