具有可重用头像的 React 组件

Question

我是 React 的新手，遇到了障碍。基本上，我正在尝试创建一个简单的可重用组件。我正在使用 MUI 并想创建一个头像组件，以便在调用时使用不同的图像在任何地方调用。我希望能够在各种页面中声明组件时调用参数。请帮忙

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';
import frankieAvatar from '/Users/rodriguezmedia/Desktop/react-counter-app/src/images/oink.png';
import { AvatarGroup } from '@mui/material';

const designerOne = {
    src: frankieAvatar
}

export default function AvatarDesigners() {
    return (
        <Avatar src={designerOne.src}></Avatar>
    );
}

Answer 1

你可以像下面这样简单地做。

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';
import { AvatarGroup } from '@mui/material';


export default function AvatarDesigners({src}) {
    return (
        <Avatar src={src}></Avatar>
    );
}

您使用的组件：

import * as React from 'react';
import frankieAvatar from '/Users/rodriguezmedia/Desktop/react-counter- 
app/src/images/oink.png';
import AvatarDesigners from './AvatarDesigners'

const designerOne = {
    src: frankieAvatar
}

export default function Profile() {
    return (
        <div>
            <AvatarDesigners src={designerOne.src}></Avatar>
        </div>
    );
}

Answer 2

如果可以通过将标准 img 道具 src 或 srcSet 传递给组件来创建图像头像。

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />

Answer 3

如果加载头像图片时出错，组件会按以下顺序回退到备选方案：提供的 children 替代文字的第一个字母通用头像图标

<Avatar
  sx={{ bgcolor: deepOrange[500] }}
  alt="Remy Sharp"
  src="/broken-image.jpg"
>
  B
</Avatar>
<Avatar
  sx={{ bgcolor: deepOrange[500] }}
  alt="Remy Sharp"
  src="/broken-image.jpg"
/>
<Avatar src="/broken-image.jpg" />

具有可重用头像的 React 组件

React component with re usable avatar

html

javascript

components

reactjs

material-ui