Chakra UI Image组件在Next.js中无法识别本地图片路径怎么办？

Next.js 中 import 本地静态图片资源时，返回值不是纯路径字符串，而是包含 src、width、height 属性的资源对象。Next.js 自带的 Image 组件可以自动识别该对象格式，但 Chakra UI 原生的 Image 组件仅接受字符串类型的 src 参数，因此无法正常加载。

• 方案1：直接取导入对象的src属性（改动最小）
  直接修改Image组件的src参数即可，其余代码保持不变：

<Image src={source.src} alt="s" w={100} h={100} borderRadius="full" />

该方案不需要调整资源位置，也不需要新增依赖，适合快速修复。

• 方案2：将静态资源放入public目录（更符合Next.js静态资源规范）

1. 在项目根目录新建public/images文件夹，把logo.svg移入该目录
2. 删除头部的import source from "../images/logo.svg"导入语句
3. 直接将src设为公开路径：

<Image src="/images/logo.svg" alt="s" w={100} h={100} borderRadius="full" />

public目录下的资源会被Next.js直接映射到站点根路径，所有组件都可以直接通过绝对路径访问。

• 方案3：Chakra Image复用Next.js Image组件（推荐，可保留Next.js图片优化能力）
  Chakra的组件支持通过as参数指定底层渲染的元素/组件，你可以直接把Next.js的Image作为底层组件传入，同时保留Chakra的样式props支持：

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

export default Header;

该方案可以同时用到Chakra的样式系统和Next.js图片的懒加载、格式自动转换等优化能力。

内容的提问来源于stack exchange，提问作者DormantPoison