创建反应应用程序不在开发或构建中加载CSS背景图像 [英] create react app not loading css background images in dev or build

问题描述

我无法加载某些背景图片。我对初始创建反应应用程序做了一些重大修改，我的文件夹结构现在如下：

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.

注意：我加载图片 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中的元素时，图片的路径似乎是正确。当我将鼠标悬停在检查器的样式选项卡中的图像路径上时，将显示图像。

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.

请注意，我导入的图像的路径类似于背景图像的路径：

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

如果我要导入 tree.png 作为导入树来自'./images/tree.png'; 并将我的两个< div> 元素更改为< img src = {tree} role =presentationclassName =trees__tree trees__tree - 1/> 和< img src = {tree} role =presentationclassName =trees__tree trees__tree - 2/> 图片当然会加载。

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.

如何显示背景图像？我在应用程序中有其他背景图像没有加载，所以前面提到的bandaid将无法帮助我。我害怕弹出我的应用程序并弄乱配置。

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.

如果您需要查看更多来源，可以在 https：// github上查看.com / studio174 / ispellits 但请记住，我已经简化了这个例子来隔离问题。我遇到的问题实际上是在 Footer.jsx 和 Footer.css

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

推荐答案

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

The issue was purely an issue with CSS in the App.css file:

App.css

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

这篇关于创建反应应用程序不在开发或构建中加载CSS背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！