How can i make chakra ui components use next/image to optimize the photos automatically?

Question

in this snippet i use the Avatar component but the image is not optimized in the site like next/image does automatically

code snippet

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;

Answer 1

I like this approach: chakra-ui/discussions/2475#discussioncomment-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" />

…which uses Chakra Factory - Chakra UI

Chakra factory serves as [snip] a function that can be used to enable custom component receive chakra's style props.

Other solutions are suggested in the issue linked.