Question

尝试设置图像字段的高度和宽度，并在周围的容器上强制执行，而不是在图像本身上强制执行。

const styles = {
  profile: { height: 50, width: 50 }
}

export const UserList = withStyles(styles)(({ classes, permissions, ...props }) => (
  <List actions={<UserListActions />} sort={{ field: 'lastName', order: 'ASC' }} title="All users" {...props} bulkActions={false}>
    <Datagrid>
      <ImageField source="imageUrl" label="Profile Picture" className={classes.profile} />

Answer 1

弄清楚了。只是做错了：

const styles = {
  image: { maxHeight: '3rem' }
}

export const UserList = withStyles(styles)(({ classes, permissions, ...props }) => (
  <List actions={<UserListActions />} sort={{ field: 'lastName', order: 'ASC' }} title="All users" {...props} bulkActions={false}>
    <Datagrid>
      <ImageField classes={classes} source="imageUrl" label="Profile Picture" />

Answer 2

这也有效：

import { makeStyles } from '@material-ui/core/styles';

const useImageFieldStyles = makeStyles(theme => ({
    image: { // This will override the style of the <img> inside the <div>
        width: 50,
        height: 50,
    }
}));

const PostEdit = ({ permissions, ...props }) => {
    const imageFieldClasses = useImageFieldStyles();
    return (
        // ...
        <ImageInput multiple source="pictures" accept="image/*">
            <ImageField classes={imageFieldClasses} source="src" title="title" />
        </ImageInput>
        // ...
    );
};

发件人： https://github.com/marmelab/react-admin/issues/3106#issuecomment-658752706

react-admin ImageField高度/宽度

2 个答案: