这个例子"图像头像"https://material-ui.com/demos/avatars/来自material-ui v3.2.0
网站,但不知何故,我在实现时看不到图像。
为什么我在
material -ui-v3.2.0
"图像"示例中看不到图像 头像"?
在示例中'icon avatars'
和'Letter avatars'
我可以看到图像。我使用create-react-app 'react-scripts': '^2.0.4', but also tried on 'react-scripts': '^1.1.5'
但没有任何效果。
PFB以下代码:
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
const styles = {
row: {
display: 'flex',
justifyContent: 'center',
},
avatar: {
margin: 10,
},
bigAvatar: {
width: 60,
height: 60,
},
};
function ImageAvatars(props) {
const { classes } = props;
return (
<div className={classes.row}>
<Avatar alt="Remy Sharp" src="/static/images/remy.jpg" className={classes.avatar} />
<Avatar
alt="Adelle Charles"
src="/static/images/uxceo-128.jpg"
className={classNames(classes.avatar, classes.bigAvatar)}
/>
</div>
);
}
ImageAvatars.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ImageAvatars);
您需要导入它。只是将路径直接传递给 src 是行不通的。以下是在 react 中渲染图像的两种方法
使用导入
import uxceo from "/static/images/uxceo-128.jpg";
import remy from "/static/images/remy.jpg";
<Avatar alt="Remy Sharp" src={remy} className={classes.avatar} />
<Avatar
alt="Adelle Charles"
src={uxceo}
className={classNames(classes.avatar, classes.bigAvatar)}
/>
或使用要求
<Avatar alt="Remy Sharp" src={require("/static/images/remy.jpg")} className={classes.avatar} />
<Avatar
alt="Adelle Charles"
src={require("/static/images/uxceo-128.jpg")}
className={classNames(classes.avatar, classes.bigAvatar)}
/>