Chakra UI not loading Images locally

user_11578620 0
Viewed 1128

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

1

In my console:

2

chakra-ui next.js reactjs javascript
3 Answers
user_165382630

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/Spotcloud.png';

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

Just do "/" to access images in public folder

user_199974840
Related