Как я могу сделать выбор аватара с помощью Material UI

Я использую Material UI v3 в проекте реагирования (реакция v15.6).

Что я уже сделал?

На странице регистрации я могу получить изображение от пользователя для использования в качестве его/ее фотографии профиля.

Что я хочу сделать

Я хотел бы иметь тень на фото аватара, чтобы показать ему, что кликабельно. нравится этот образ...

аватарChooserImage

Кто-нибудь может сказать мне, как я могу сделать такую ​​​​вещь? Я понятия не имею. Я пытался использовать простой CSS, но много усилий напрасно.


reactjs material-ui picker avatar
person Firus    schedule 27.02.2019    source источник
comment
почему за него проголосовали, а у ответа 5 голосов? Люди ищут и получают ответ на этот вопрос, который помогает им сэкономить время. Если бы не было этого вопроса, вы бы просто продолжали гуглить, тратя впустую больше времени. Лучше предложите редактирование, если вы видите способ его улучшить, и скажите спасибо за то, что сэкономили мое время, проголосовав за него. Я просто против молчаливых отрицательных голосов, поскольку это дает минимальную информацию о том, как ее улучшить. В конце концов, такой вклад будет иметь гораздо более положительное влияние, чтобы помочь сделать SO еще лучше.   -  person vir us    schedule 26.02.2020
comment
Спасибо, что поделились своей позицией @vir нас. Я задал этот вопрос, когда у меня было всего 1-2 месяца опыта разработки интерфейса, и да, теперь я вижу некоторые улучшения, которые я могу сделать. Но я хотел бы знать что-нибудь, что может помочь еще больше тем, у кого такая же проблема.   -  person Firus    schedule 07.05.2020
comment
codesandbox.io/s/material-ui-avatar-upload-example- хгфукс   -  person Michael Pacheco    schedule 24.10.2020

Ответы (2)


arrow_upward
12
arrow_downward

Вы можете сделать что-то простое, как это,

<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. Это объясняет, как разместить слой поверх значка аватара, он должен ответить на ваш вопрос.

P.S. Примите это как правильный ответ, если он отвечает на ваш вопрос, спасибо.

person will92    schedule 28.02.2019
comment
Спасибо, это работает хорошо!, но что я могу сделать с частью тени с текстом «редактировать»? - person Firus; 28.02.2019
comment
@Firus, я отредактировал свой пост, взгляните на ссылку, она должна помочь вам сделать наложение - person will92; 28.02.2019
comment
Спасибо за помощь и терпение. Я выбрал свой аватар! - person Firus; 01.03.2019
comment
Не беспокойтесь, получайте удовольствие от кодирования! - person will92; 01.03.2019
comment
Это не работает. Исправьте это, изменив IconButton на <IconButton component='span'> - person Cristian G; 05.10.2020

arrow_upward
0
arrow_downward

В документации есть аналогичный пример:

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

Вместо использования PhotoCamera вы можете использовать Avatar. Позволяет вам щелкнуть свой аватар, чтобы загрузить изображение, например:

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>
  );
}
person Hoppjerka    schedule 07.11.2020