Chakra UI not loading Images locally

Question

I am having some difficulties loading local images using Chakra UI with Next.js.

<Image src="./homepage/footer/Black.svg" />

This is the folder structure

In my console:

Answer 1

instead of directly referencing image path, try variable import like below ( i have imported my image as logo )

import { Box, Image, VStack } from '@chakra-ui/react';
import logo from './../../assets/images/xyz.png';

const Home = () => {
  return (
    <Box minH="100vh" className="hero-gradient">
      <VStack>
        <Image src={logo} alt="logo" />
      </VStack>
    </Box>
  );
};
export default Home;

Answer 2

Try to put the public folder in the root at the same level as src folder.

https://nextjs.org/docs/basic-features/static-file-serving