Блог

в этом фрагменте я использую компонент Аватара, но изображение не оптимизировано на сайте, как это автоматически делает next/image

фрагмент кода

 
const ee = (props: any) => {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <Box w="300px" h="400px"  >
      <Flex h="100%" w="100%" flexDir="column" align="center">
        <Avatar shadow='lg' size="xl" mt={5} src={props.image} />
        <Box  shadow='md' w="100%" h="250px"mt={5} rounded="xl" bgColor={colorMode === "light" ? "gray.100" : "gray.600" } >
          <Box  w="100%" h="20%"  p={2}  bgColor={colorMode === "light" ? "gray.200" : "gray.700"} rounded="xl" >
            <Flex  direction="row" justifyContent="space-between" align="baseline" >
              <Flex >
              <Badge  colorScheme="twitter" mr={2} rounded="md" p="1">

                Success
              </Badge>
              <Badge colorScheme="twitter"   mr={2} rounded="md" p="1">

                Success
              </Badge>
              </Flex>
            <Text mr="1px">cs</Text>
            </Flex>
          </Box>
        </Box>
      </Flex>
    </Box>
  );
};

export default ee;

 

Мне нравится такой подход: чакра-пользовательский интерфейс/обсуждения/2475#обсуждение-229471

 import NextImage from "next/image";
import { chakra } from "@chakra-ui/react";

const Image = chakra(NextImage, {
  baseStyle: { maxH: 120, maxW: 120 },
  shouldForwardProp: (prop) =>
    [
      "width",
      "height",
      "src",
      "alt",
      "quality",
      "placeholder",
      "blurDataURL",
      "loader ",
    ].includes(prop),
});

<Image src={imgSrc} alt="descriptive" width="20px" height="20px" />
 

…который использует фабрику Чакр — пользовательский интерфейс Чакры

Фабрика чакр служит [snip] функцией, которая может быть использована для того, чтобы пользовательский компонент получал реквизит стиля чакры.

Другие решения предлагаются в связанной проблеме.