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

以下是我创建此问题的步骤：

$cd src/server && npm run dev

这将启动开发服务器并打开浏览器到我的应用程序,一切正常,除了页面上的一些元素没有显示图像.

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

当我检查Chrome中的元素时,图像的路径似乎是正确的.当我将鼠标悬停在检查器的样式选项卡中的图像路径上时,将显示图像.

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

如果我要从’./images/tree.png’导入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”/>图像当然会加载.

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

我在构建应用程序时也遇到了同样的问题.

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