如何使用 Material UI 制作头像选择器

Question

我在 React 项目中使用 Material UI v3 (react v15.6)。

到目前为止我做了什么？

在注册页面中，我可以从用户那里获取一张图片用作 his/her 个人资料照片。

我想做什么

我想在头像照片上加一个阴影，让他知道可以点击。喜欢这张图片...

avatarChooserImage

有人可以告诉我，我怎么能做这样的事？我没有线索。我尝试使用普通的 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>

要为 "edit" 做叠加，请查看 css image overlay。这解释了如何在头像图标上放置一个图层，它应该回答你的问题。

P.S如果能回答您的问题，请采纳为正确答案，谢谢。

Answer 2

文档中有一个类似的示例：

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

您可以使用“Avatar”代替“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 制作头像选择器

How can i make an avatar chooser with Material UI

picker

avatar

reactjs

material-ui