如何让 chakra ui 组件使用 next/image 自动优化照片？

Question

在此片段中，我使用 Avatar 组件，但图像并未像 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;

Answer 1

我喜欢这种方法：\n chakra-ui/discussions/2475#discussioncomment-229471

\n

import NextImage from "next/image";\nimport { chakra } from "@chakra-ui/react";\n\nconst Image = chakra(NextImage, {\n  baseStyle: { maxH: 120, maxW: 120 },\n  shouldForwardProp: (prop) =>\n    [\n      "width",\n      "height",\n      "src",\n      "alt",\n      "quality",\n      "placeholder",\n      "blurDataURL",\n      "loader ",\n    ].includes(prop),\n});\n\n<Image src={imgSrc} alt="descriptive" width="20px" height="20px" />\n

\n

\xe2\x80\xa6使用Chakra Factory - Chakra UI

\n

\n

Chakra 工厂充当 [snip] 功能，可用于使自定义组件接收 chakra 的样式道具。

\n

\n

链接的问题中建议了其他解决方案。

\n