Итак, я создаю приложение реагирования, и я думаю, что лучше показать вам код, чем объяснить:
Тело. js:
import React from 'react';
import Clearsky from "Images/clearsky.jpg";
import Rain from "Images/clearsky.jpg";
import Cloudy from "Images/clearsky.jpg";
const type = {
CLEARSKY: "clearsky",
RAIN: "rain",
CLOUDY: "cloudy"
}
class LeftSide extends React.Component {
constructor(props) {
super(props);
this.state = {
type: this.props.type,
degrees: this.props.degrees
}
}
render() {
return (
""
);
}
}
export default function Body() {
//This is printing the correct path and if I type it in the browser I can see the image.
console.log(type.CLEARSKY);
const style = {
//Not working
backgroundImage: `url(${Clearsky})`
}
return (
<div className="body" style={style}>
<LeftSide />
</div>
);
}
Заголовок. js (использует material-ui.com):
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import logo from "Images/icon.png";
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}));
export default function Header() {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="fixed" style={{ borderRadius: "25px"}}>
<Toolbar>
<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
Weather
</Typography>
<img src={logo} alt="Icon" height="50" width="50" />
</Toolbar>
</AppBar>
</div>
);
}
index. js:
import React from "react";
import ReactDOM from "react-dom";
import Header from "./Header.js";
import Body from "./Body.js";
export default function App() {
return (
<div className="App">
<Header />
<Body />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
Однако backgroundImage на Body. js не работает, только белый по умолчанию background.
Пробовал: Изображение с онлайн-сервера (не локальное изображение). Настройка backgroundSize.
РЕДАКТИРОВАТЬ: Мой каталог: 
ср c: 
Изображения:
РЕДАКТИРОВАТЬ 2: Я заметил, что если я изменю компонент LeftSide, чтобы вернуть
<p>A</p>
вместо "", это будет отображаться в браузере: 
Часть изображения визуализирована. Теперь я считаю, что это что-то с css.