Reputation: 85
I am using Material-UI Avatar React component to show profile images. While compiling it can reach the image, there is no error in compile time. But image is not showing in the browser.
Please check this image to better understand
Codes:
import {avatar} from '../../images/avatar.png';
<Box component='div'>
<Avatar src={avatar} alt="Russel Crow"/>
</Box>
Please tell me why image is not showing in the browser and How to show it?
Upvotes: 4
Views: 9424
Reputation: 2814
Example
import React from 'react';
import { Badge, Box, Stack } from '@mui/material';
import Avatar from '@mui/material/Avatar';
import { Theme, styled } from '@mui/material/styles';
import { makeStyles } from '@mui/styles';
import avatarIcon from "../../assets/avatar.png"; // or -> import avatarIcon from "@assets/avatar.png";
interface Props {
children?: React.ReactNode;
}
const AvatarCustom: React.FC<Props> = ({ children, ...props }) => {
const classes = useStyles();
return (
<Stack flexDirection={"column"} alignItems={"center"}>
<Box sx={{ background: (theme) => theme.palette.backgroundColor.secondary, borderRadius: 3, padding: 2, margin: 2 }}>
<Badge
overlap="circular"
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
variant="dot"
sx={{ border: "0px solid white", width:"fit-content", }}
>
<Avatar alt="Remy Sharp" src={avatarIcon} id="avatar" className={classes.avatar} />
</Badge>
</Box>
</Stack>
)
}
export default AvatarCustom;
Upvotes: 0
Reputation: 31
You can try with inline url.
Try to run like this
import Avatar from '@material-ui/core/Avatar';
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
Upvotes: 1
Reputation: 586
You used a named import, try it like this:
import avatar from '../../images/avatar.png'
Upvotes: 10