Chakra UI Image component not recognizing image path

user_10976469 0
Viewed 7026

I'm currently learning how to use ChakraUI

When trying to load local images using import { Box, Heading, Text, Image } from "@chakra-ui/react"; they don't display at all, just the alt text as if their paths where not properly typed, I also tried to type the image source directly into the component.

The nextjs/image component works properly with the exact same src path and I haven't got any information on this particular error, I have also tried the @chakra-ui/image component and the import { Img } from "@chakra-ui/react"; as Im working using Nextjs too, neither of those chakra options have worked for me.

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;

On the ChakraUI documentation its never used a local path as an example, but i supposed it wouldn't be a problem

chakra-ui next.js reactjs
2 Answers

The only solution that I found is to put your images directly inside the public folder. And then import the Image component from charkra-ui/react

enter image description here

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

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

I had a similar issue, but in my case, I didn't use import. After using import as you did above, it worked fine.

Now since you are using Next.js, I suggest you import and use the Chakra Img component from @chakra-ui/react and use that instead. This tip is from the Chakra UI author on this thread

user_166095440
Related