CODEWITHSUNDEEP
react-admin
Rick Baker
Rick Baker

Reputation: 903

react-admin ImageField height/width

Trying to set the height and width of an imagefield, and it enforces it on the surrounding container but not on the image itself.

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} />

Upvotes: 2

Views: 3272

Answers (3)

s.n
s.n

Reputation: 703

Recommended way of doing it is this

 <ImageField
    source="imageUrl" label="Profile Picture"
    sx={{ '& img': { maxWidth: 50, maxHeight: 50, objectFit: 'contain' } }}
/>

Upvotes: 0

Denxorz
Denxorz

Reputation: 346

This also works:

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>
        // ...
    );
};

From: https://github.com/marmelab/react-admin/issues/3106#issuecomment-658752706

Upvotes: 2

Rick Baker
Rick Baker

Reputation: 903

Figured this out. Was just doing it wrong:

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" />

Upvotes: 9

Related Questions