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>
Related
Does anybody know how to add onhover effect to react grid gallery?
I have figured out that onhover event needs to be added to the parent element of Gallery.
However, dont know where to go from there.
I need image to increase in size a bit when u hover over it.
<Box sx={maingrid}>
<Box onMouseOver={handleHover}>
<Gallery
images={images}
margin={1}
maxRows ={{xs:4,lg:2, xl:2}}
rowHeight={300}
onClick={handleClick}
enableImageSelection={false}
/>
{!!currentImage && (
<Lightbox
mainSrc={currentImage.original}
imageTitle={currentImage.caption}
mainSrcoriginal={currentImage.src}
nextSrc={nextImage.original}
nextSrcoriginal={nextImage.src}
prevSrc={prevImage.original}
prevSrcoriginal={prevImage.src}
onCloseRequest={handleClose}
onMovePrevRequest={handleMovePrev}
onMoveNextRequest={handleMoveNext}
/>
)}
so what do i need pass in handleHover finc? thanks!
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 working on a web app, using React.js and Material UI. I don't know why image is not displaying on my web, I have tried almost everything I can. Here is the code where I am using the image tag.
import { TextField, Grid, Typography } from '#material-ui/core';
import WFH1 from './images/WFH1.svg'
function IntroSection()
{
return(
<Grid container>
<Grid item xs={3}>
<image src={WFH1}/>
</Grid>
<Grid item xs={6} style={{color:'white', textAlign:'center'}}>
<Typography variant="h3">Get paid for the work</Typography>
<Typography variant="h3"> you <span style={{color:'#3ee8e5'}}>love</span> to do.</Typography>
</Grid>
<Grid item xs={3}></Grid>
</Grid>
);
}
export default IntroSection; ````
And here is the structure of my code:
[1]: https://i.stack.imgur.com/KwRbs.png
You should use the HTML img tag to actually display an image:
https://www.w3schools.com/tags/tag_img.asp
You are trying to use an HTML tag image, that not exists.
Image tag is not exists. You have to use img tag in html.
<img src={WFH1}/>
I am trying to load images dynamically in react and pass them as props. I have a data.json file that is basically an array of article objects.
title:"article1"
headline:"headline1"
image:"/src/images/articleimage1"
articleContent:"ipsum lorem"
in the first component I map through the array and return a "card" with props
const featuredArticles = imageCardArray.map(elem => <ImageCard
title={elem.title}
headline = {elem.headline}
image= {elem.image}
/>)
return (
<div className ="center">
{featuredArticles}
</div>
then I use those props in the card component itself. It all works perfectly except for the images
function ImageCard(props) {
return (
<div className="imageCard">
<Card>
<CardActionArea>
<CardMedia
component="img"
image={props.image}
title={props.title}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{props.title}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{props.headline}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" varient="outlined">
Artigo completo
</Button>
</CardActions>
</Card>
</div>
);
}
export default ImageCard;
any ideas how to load these images? the card component is from material UI if it helps. (it says in the docs that the image property just accepts a string)
I can get the image to load in the card by importing it at the top and then image = {image}, but of course then it is not dynamic and all the cards have the same image. please help!! thanks
You need to import the image from directory at top
import ArticleImg1 from 'image path';
and then construct your array of objects like this
{
title:"article1"
headline:"headline1"
image:ArticleImg1
articleContent:"ipsum lorem"
}
If I understand your question correctly it will work.
the answer is here https://medium.com/react-courses/5-top-methods-to-import-and-load-images-dynamically-on-cra-react-local-production-build-855d3ba3e704
you need to have in your json just the file name for the image, not the full path.
title:"article1"
headline:"headline1"
image:"articleimage1"
articleContent:"ipsum lorem
then in the card component:
you can either assign the resource to a component ...
const Image = require( '/src/images/'+ props.image);
and in the JSX
<img className="card-img-top" src={ Image } alt="image not found" />
or do the require in the jsx
<img className="card-img-top" src={ require( '/src/images/'+ props.image) } alt="image not found" />
assumption made that all images will be in the same folder...
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