This example "Image avatars" https://material-ui.com/demos/avatars/ comes from material-ui v3.2.0
website but somehow I can't see the image when I implement.
Why I can't see image in the example of
material -ui-v3.2.0
"Image avatars "?
In the examples 'icon avatars'
and 'Letter avatars'
I can see the image. I use the create-react-app 'react-scripts': '^2.0.4', but also tried on 'react-scripts': '^1.1.5'
but nothing works.
PFB below code:
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
const styles = {
row: {
display: 'flex',
justifyContent: 'center',
},
avatar: {
margin: 10,
},
bigAvatar: {
width: 60,
height: 60,
},
};
function ImageAvatars(props) {
const { classes } = props;
return (
<div className={classes.row}>
<Avatar alt="Remy Sharp" src="/static/images/remy.jpg" className={classes.avatar} />
<Avatar
alt="Adelle Charles"
src="/static/images/uxceo-128.jpg"
className={classNames(classes.avatar, classes.bigAvatar)}
/>
</div>
);
}
ImageAvatars.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ImageAvatars);
You need to import it. Just passing path directly to src won't work. Below are two ways to render images in react
Using import
import uxceo from "/static/images/uxceo-128.jpg";
import remy from "/static/images/remy.jpg";
<Avatar alt="Remy Sharp" src={remy} className={classes.avatar} />
<Avatar
alt="Adelle Charles"
src={uxceo}
className={classNames(classes.avatar, classes.bigAvatar)}
/>
OR Using require
<Avatar alt="Remy Sharp" src={require("/static/images/remy.jpg")} className={classes.avatar} />
<Avatar
alt="Adelle Charles"
src={require("/static/images/uxceo-128.jpg")}
className={classNames(classes.avatar, classes.bigAvatar)}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With