I am using Material-UI Avatar React component for show profile images.I need to show letter avatar when there is no image from given url. How can I achieve this?.
<Avatar src={ProfileImageUrl} className={classes.avatar}>
{userDetails.fistname.charAt(0)+" "+userDetails.lastname.charAt(0)}
</Avatar>
Avatar component itself has an alternative attribute like the standard img tag
<Avatar alt="avatar" src={ProfileImageUrl} className={classes.avatar}>
{userDetails.fistname.charAt(0)+" "+userDetails.lastname.charAt(0)}
</Avatar>
You can use alt attribute directly, Ref
<Avatar alt="No Image" src={ProfileImageUrl} className={classes.avatar}>
{userDetails.fistname.charAt(0)+" "+userDetails.lastname.charAt(0)}
</Avatar>
Or, you can use a condition to show default letter, Ref
,considering you are having userDetails object
<Avatar Image" src={ProfileImageUrl} className={classes.avatar}>
{Object.getOwnPropertyNames(userDetails).length>0 ? userDetails.fistname.charAt(0)+" "+userDetails.lastname.charAt(0) : 'No Image'}
</Avatar>
I just solved this issue in my project:-
If there's an error in the url mentioned in src, the Avatar component would fallback to the children i.e, the text you've provided:- {userDetails.fistname.charAt(0)+" "+userDetails.lastname.charAt(0)}.
This would result into a letter avatar.
Link to the documentation
Related
everyone. I wonder why my avatar is displayed rotated. I'm using the Map element from Material Design with React. Can I always display the image "correctly"? Thanks
Main Part of code:
<Card>
<CardHeader
avatar={
<Avatar
src={process.env.PUBLIC_URL + "/image.JPG"}
alt="Masterman"
></Avatar>
}
....
</Card>
I am using React Material UI version 4.9.5 and React version 16.13.
Inside CardHeader tag i need to show 2 buttons. I tried placing buttons inside CardHeader tag but they dont show up. I placed the buttons inside title attribute of CardHeader but it shows buttons html code.
How to show HTML tag inside the CardHeader tag?
This is the part of code:
<div className={classes.root}>
<Card elevation={2} >
<CardHeader title= 'New Clin' className = {classes.cardHeaderClass}></CardHeader>
<CardContent className={classes.formContainer} >
<Divider className={classes.divider} />
<Grid container>
like in material ui card example, you need to add your button in action cardHeader props like for example:
<CardHeader
avatar={
<Avatar aria-label="recipe" className={classes.avatar}>
R
</Avatar>
}
action={
<IconButton aria-label="settings">
<MoreVertIcon />
</IconButton>
}
title="Shrimp and Chorizo Paella"
subheader="September 14, 2016"
/>
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?
You used a named import, try it like this:
import avatar from '../../images/avatar.png'
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" />
Could you please tell me Why header show blue color ? I already try to change theme colour but it not work .I am expecting “Red” color
using from this link
https://material-ui.com/demos/app-bar/
here is my code
https://codesandbox.io/s/7191w73nxx
<div className="App">
<MuiThemeProvider muiTheme={theme}>
<AppBar position="static" color="primary" className="app-header">
<Toolbar>
<Typography variant="h6" color="inherit">
Photos
</Typography>
</Toolbar>
</AppBar>
</MuiThemeProvider>
</div>
For <MuiThemeProvider>, you are passing the prop muiTheme={theme}. This is incorrect. You should be using prop theme, like so:
<MuiThemeProvider theme={theme}>
Your code sandbox, after a quick edit to the prop name, looked like this:
The Material-UI Themes documentation shows some helpful examples, where you can view the source code to see how to use them in your React app.
Here is the updated code. https://codesandbox.io/s/w0xrmpy1m8
Only mistake was <MuiThemeProvider theme={theme}>
expected theme for props instead of
muiTheme which you had provided
I have a simple Card in material-ui:
<Card>
<CardHeader
title={this.props.series.name} />
</Card>
And I would like to have the title be a link to a URL that I pass in via a property. I looked at the JSX source for the card header, but I cannot figure out how to make this happen.
<CardHeader
avatar={
<Avatar aria-label={placeData.type} className={classes.avatar}>
<PlaceTypeIcon type={placeData.type} />
</Avatar>
}
action={
<IconButton href={gMapUrl} aria-label="maps">
<MapOutlinedIcon />
</IconButton>
}
title={placeData.title}
subheader={placeData.street}
/>
putting it in the action prop also works fine
The simplest way to do it is to just put an a tag inside the title attribute of CardHeader:
<CardHeader
action={
<IconButton>
<MoreVertIcon />
</IconButton>
}
title={
<Link to={url}>{props.name}</Link> //similarly use `a` if not using react-router
}
// For making an avatar link
avatar={
<Avatar component={Link} to={url} aria-label={props.name} className={classes.avatar}>
A
</Avatar>
}
subheader={props.subheader}
/>
There seems no provision to make header as <a> from sourcecode.
But there are some hacks which you can use to get things working
pass <a href=''> as value to that prop
listen to click event and fire transitionTo to change the route.
This here worked for me, I just put a Material UI Link inside of the CardHeader subheader.
<CardHeader
avatar={
<Avatar aria-label={placeData.type} className={classes.avatar}>
<PlaceTypeIcon type={placeData.type} />
</Avatar>
}
title={placeData.title}
subheader={
<Link className={classes.link} href={gMapUrl}>
{placeData.street}
</Link>
}
/>
If making it an <a href={} /> does not work, I am sure this will:
<Card>
<CardHeader title={this.props.series.name} onClick={this.props.series.link} style={linkStyle}/>
</Card>
And assign a custom linkStyle that would make the <CardHeader/> look like a link.
This worked for me.
<CardTitle title={renderHTML('TITLE' )}/>
You can use same method for subtitle as well.