Chakra UI Image 组件无法识别图像路径

Question

我目前正在学习如何使用 ChakraUI

当尝试使用加载本地图像时 import { Box, Heading, Text, Image } from "@chakra-ui/react"; 他们根本不显示，只是 alt 文本，好像他们的路径没有正确输入，我还尝试将图像源直接输入到组件中。

nextjs/image 组件与完全相同的src 路径 正常工作，我没有关于此特定错误的任何信息，我还尝试了@chakra-ui/image 组件和@ 987654326@ 因为我也在使用 Nextjs，这些脉轮选项都没有为我工作。

import React from "react";
import { Box, Heading, Text, Image } from "@chakra-ui/react";
// import Image from "next/image"; //The nextjs image component does works! 
import source from "../images/logo.svg";
const Header = () => {
  return (
    <Box bg="brand.900" w="100%" p={4} color="white">
      <Box>
        <Image src={source} alt="s" w={100} h={100} borderRadius="full" />
      </Box>
    </Box>
  );
};

export default Header;

在 ChakraUI 文档中，它从未使用本地路径作为示例，但我认为这不是问题

Answer 1

我遇到了类似的问题，但就我而言，我没有使用 import。如上所述使用导入后，它工作正常。

现在由于您使用的是 Next.js，我建议您从 @chakra-ui/react 导入并使用 Chakra Img 组件并改用它。这个技巧来自Chakra UI author这个thread