Я использую материальную сетку пользовательского интерфейса и изображения react-cool-images. по какой-то причине при загрузке страницы текст мигает без стиля. Когда я комментирую изображения. Текст отображается отлично без fla sh нестилизованного содержимого. Когда я раскомментирую изображения, происходит ошибка sh нестилизованного содержимого. Я хотел бы знать, есть ли у кого-нибудь идеи о том, как предотвратить этот fla sh нестилизованного контента, который, я могу с уверенностью сказать, вызван загрузкой изображений. Есть ли способ скрыть текст изображения до полной загрузки изображений? вот пример того, как выглядят мои элементы сетки.
<Grid
item
xs={12}
sm={9}
md={6}
lg={6}
xl={6}
className={classes.grid}
style={{
display: "block",
marginLeft: "auto",
marginRight: "auto",
width: "100%",
}}
>
<Img
placeholder={JobTrackerPlace}
src={JobTracker}
cache={false}
alt='JobTracker'
className={classes.image}
/>
</Grid>
<Grid
item
xs={12}
sm={9}
md={6}
lg={6}
xl={6}
className={classes.grid}
style={{
display: "block",
marginLeft: "auto",
marginRight: "auto",
width: "100%",
}}
>
<Container
component='main'
maxWidth='xs'
style={{
textAlign: "center",
}}
>
<Typography
variant='h5'
style={{
marginBottom: 10,
}}
>
JobTracker
</Typography>
<Typography
variant='body2'
>
A platform that allows recent graduates from Wyncode Academy to
track job applications, store resume's, and monitor follow ups.
Technologies used: ReactJS, NodeJS, Google Cloud Functions, and
Google Firestore.
</Typography>
<br />
<Box
className={classes.alumniChips}
>
<a
rel='noopener noreferrer'
href='https://jobtracker.netlify.app/'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<LanguageIcon />}
label='View Site'
clickable
color='primary'
/>
</a>
<a
rel='noopener noreferrer'
href='https://github.com/Rterrell25/JobTracker_Client'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<GitHubIcon />}
label='View Code'
clickable
color='primary'
/>
</a>
<JobTrackerModal />
</Box>
</Container>
</Grid>