Как изменить размер изображения в ImageField?

Когда я изменяю ширину и высоту изображения с помощью стилей, изменяется только ширина столбца. На размер изображения не влияет.

Есть идеи?

Без стилей Как изменить размер изображения в ImageField?

Со стилями Как изменить размер изображения в ImageField?

Репро Песочница кода (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>
));

С использованием

Реакт-админ версия: 2.8.5
Версия реакции: 16.8.6
Браузер: Chrome версии 73.0.3683.86 (официальная сборка) (64-разрядная версия)

react-admin

10.04.2019 04:52

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

1 992

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вам может понадобиться специальный компонент, чтобы сделать что-то подобное. Как насчет такого:

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>
);

интересно, это действительно работает, чем принятый ответ

— 08.11.2019 05:03

11.04.2019 04:44

Ответ принят как подходящий

Опираясь на пост Шона К. (спасибо за направление!)...

Я считаю, что это полный компонент (я протестировал переопределение классов из компонента <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);