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

Question

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

尝试使用加载本地镜像时import { Box, Heading, Text, Image } from "@chakra-ui/react"; 它们根本不显示，只显示替代文本，就好像它们的路径输入不正确一样，我也尝试将图像源直接键入组件。

nextjs/image 组件在完全相同的src 路径 下正常工作，我没有得到关于这个特定错误的任何信息，我还尝试了 @chakra-ui/image 组件和 import { Img } from "@chakra-ui/react"; 因为我正在使用 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

我找到的唯一解决方案是将您的图像直接放在公共(public)文件夹中。然后从 charkra-ui/react 导入 Image 组件

import {Image} from '@chakra-ui/react'

const ImageComponent = () => {
  return {
     <Image src="/hero.jpg" alt="hero-image"/>
   } 
}