我无法加载某些背景图像。我对最初的创建反应应用程序进行了一些重大修改,我的文件夹结构现在如下:
注意:我省略了一些文件和文件夹,如果您需要更多,请告诉我。
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.png
as import tree from './images/tree.png';
并改变我的两个<div>
元素到<img src={tree} role="presentation" className="trees__tree trees__tree--1" />
and <img src={tree} role="presentation" className="trees__tree trees__tree--2" />
图像当然会加载。
如何让背景图像显示?我的应用程序中有其他背景图像未加载,因此前面提到的创可贴对我没有帮助。我害怕弹出我的应用程序并弄乱配置。
我在构建应用程序时也遇到了同样的问题。
如果您需要查看更多源代码,可以在以下位置查看:https://github.com/studio174/ispellits https://github.com/studio174/ispellits但请记住,我简化了这个示例来隔离问题。我遇到的问题实际上是Footer.jsx
and Footer.css