Question

我正在将Material UI与react项目一起使用。在注册页面中，我可以从用户那里获取文件以用作他的个人资料照片，但我想在头像上加上阴影以显示可单击的对象。喜欢这张图片...

有人可以告诉我，我该怎么做？我没有线索。我尝试使用普通的CSS，但是花了很多功夫。

Answer 1

您可以做一些简单的事情，

<IconButton>
 <Avatar 
  src="/images/example.jpg" 
  style={{
    margin: "10px",
    width: "60px",
    height: "60px",
  }} 
 />
</IconButton>

允许您使用可点击的头像。

但是由于您也将其用作文件输入，也许您可以执行以下操作

<input
 accept="image/*"
 className={classes.input}
 id="contained-button-file"
 multiple
 type="file"
/>
<label htmlFor="contained-button-file">
  <IconButton>
   <Avatar 
     src="/images/example.jpg" 
     style={{
      margin: "10px",
      width: "60px",
      height: "60px",
     }} 
    />
  </IconButton>
</label>

要对“编辑”进行覆盖，请查看css image overlay。这说明了如何在头像图标的顶部放置一层，它应该回答您的问题。

P.S如果能回答您的问题，请接受正确的答案，谢谢。

Answer 2

在文档中有一个类似的例子：

https://material-ui.com/components/buttons/#upload-button

可以使用“头像”代替使用“ PhotoCamera”。允许您单击头像以上传像这样的图像，例如：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import IconButton from '@material-ui/core/IconButton';



const useStyles = makeStyles((theme) => ({
  root: {
    alignSelf: 'center',
    justifyContent: "center",
    alignItems: "center",
    display: 'flex',
    '& > *': {
      margin: theme.spacing(1),
    },
  },
  input: {
    display: "none",
  },
  large: {
    width: theme.spacing(7),
    height: theme.spacing(7),
  },
}));

export default function ProfileAvatar() {
  const classes = useStyles();


  return (

    <div className={classes.root}>

      <input accept="image/*" className={classes.input} id="icon-button-file" type="file" />
      <label htmlFor="icon-button-file">
        <IconButton color="primary" aria-label="upload picture" component="span">
          <Avatar src="https://www.w3schools.com/howto/img_avatar.png" className={classes.large} />
        </IconButton>
      </label>
    </div>
  );
}

我如何通过Material UI制作头像选择器

2 个答案: