如何更改 ImageField 中图像的大小？答案

【问题标题】：How do I change the size of an image in an ImageField?如何更改 ImageField 中图像的大小？
【发布时间】：2019-04-10 02:52:36
【问题描述】：

当我使用样式更改图像宽度和高度时，只有列宽会发生变化。图像大小不受影响。

有什么想法吗？

没有样式

有样式

复制代码沙盒 (https://codesandbox.io/embed/54r440jp8k)

import React from "react";
import { Datagrid, ImageField, List, TextField } from "react-admin"; // eslint-disable-line import/no-unresolved
import { withStyles } from "material-ui/styles";

const styles = {
  image: {
    width: "20px",
    height: "20px"
  }
};

export const PostList = withStyles(styles)(({ classes, ...props }) => (
  <List {...props}>
    <Datagrid>
      <ImageField source="image.url" className={classes.image} />
      <TextField source="id" />
      <TextField source="title" />
    </Datagrid>
  </List>
));

使用

React-admin 版本：2.8.5
反应版本：16.8.6
浏览器：Chrome 版本 73.0.3683.86（官方版本）（64 位）

【问题讨论】：

标签： react-admin

【解决方案1】：

您可能需要一个自定义组件来执行类似的操作。像这样的东西呢：

ListAvatar.js

import React from 'react';
import Avatar from '@material-ui/core/Avatar';

const ListAvatar = ({ record, size }) => (
    <Avatar
        src={`${record.url.image}?size=${size}x${size}`}
        size={size}
        style={{
          width: size,
          height: size
        }}
    />
);

ListAvatar.defaultProps = {
    size: 30,
};

export default ListAvatar;

PostList.js

import React from "react";
import { Datagrid, List, TextField } from "react-admin"; // eslint-disable-line import/no-unresolved
import ListAvatar from './ListAvatar.js'
import { withStyles } from "material-ui/styles";

export const PostList = ({ classes, ...props }) => (
  <List {...props}>
    <Datagrid>
      <ListAvatar />
      <TextField source="id" />
      <TextField source="title" />
    </Datagrid>
  </List>
);

【讨论】：

有趣的是，这实际上比接受的答案有效

【解决方案2】：

以 Shawn K 的帖子为基础（感谢您的指导！）...

我相信这是一个完整的组件（我已经测试了 <List /> 组件中的类覆盖并且它可以工作。这也遵循 react-admin 和 material-ui 文档（和标准）。但是，我仍然相当新的，所以请回复任何更正，我会更新这个。

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import classNames from "classnames";

import Avatar from "@material-ui/core/Avatar";

const styles = {
  img: {
    width: 36,
    height: 36
  },
  root: {}
};

const ListAvatar = ({ className, record, source, classes }) => {
  return (
    <Avatar
      src={record[source]}
      className={classNames(classes.root, classes.img, className)}
    />
  );
};

ListAvatar.propTypes = {
  label: PropTypes.string,
  record: PropTypes.object,
  source: PropTypes.string.isRequired,
  classes: PropTypes.object.isRequired,
  className: PropTypes.string
};

export default withStyles(styles)(ListAvatar);

参考文档

头像组件API参考：https://material-ui.com/api/avatar/
头像组件示例：https://material-ui.com/demos/avatars/
react-admin 字段文档：https://marmelab.com/react-admin/Fields.html#writing-your-own-field-component

【讨论】：