Even after attempting various methods to load the image for the backgroundImage property, it still does not appear on the page. Interestingly, loading external images (such as those from Google) works just fine.
I experimented with the following:
backgroundImage: `url(${Papyrus})`
backgroundImage: "url(" + Papyrus + ")"
backgroundImage: "url(../../assets/images/papyrus.png)"
backgroundImage: Papyrus
backgroundImage: "url(\"../../assets/images/papyrus.png\")"
backgroundImage: "url(assets/images/papyrus.png)"
Despite trying all these approaches, none of them seem to work. The image is being loaded according to the network audit, it can be located in the static folder, but it refuses to display.
App.tsx
import React from 'react';
import makeStyles from './app-styles';
import {Container} from "@material-ui/core";
import Description from "../description/description";
const App: React.FC = () => {
const classes = makeStyles();
return (
<div className="App">
<Container maxWidth={"xl"}>
<div className={classes.row}>
<Description/>
</div>
</Container>
</div>
);
};
export default App;
description.tsx
import * as React from "react";
import makeStyles from './description-styles';
interface DescriptionProps {
}
const Description: React.FC<DescriptionProps> = () => {
const classes = makeStyles();
return (
<div className={classes.descriptionCard}>
<p>Some text</p>
</div>
)
};
export default Description;
description-styles.tsx
import makeStyles from "@material-ui/core/styles/makeStyles";
import Papyrus from "../../assets/images/papyrus.png";
export default makeStyles(theme => ({
descriptionCard: {
backgroundImage: `url(${Papyrus})`,
// margin: 'auto',
height: '25vh',
width: 'calc(20vw * 0.54 - 2%)',
borderRadius: 8,
display: 'flex',
marginLeft: '10px',
marginTop: '10px'
},
text: {
}
}))