image stuff D

[late crystal]

hi

1 sec

[shrewd current]

Btw I have tested the solution that I have proposed and it works for me

[late crystal]

using next Image

using standard <img

The current code:

import { Box } from "@chakra-ui/react";
import * as React from "react";
import Image from "next/image";

const ChakraNextImage = (props: {
  [x: string]: any;
  src: string;
  alt: string;
}) => {
  const { src, alt, ...rest } = props;
  return (
    <Box position="relative" height="300px" {...rest}>
      <Image
        objectFit="contain"
        layout="fill"
        width="100%"
        src={src}
        alt={alt}
      />
    </Box>
  );
};

export default ChakraNextImage;

My Layout

        <Box
          marginTop={{ base: "1", sm: "5" }}
          display="flex"
          flexDirection={{ base: "column", sm: "row" }}
          justifyContent="space-between"
        >
          <Box display="flex" flex="1" position="relative" alignItems="center">
            <Box
              width={{ base: "100%", sm: "85%" }}
              zIndex="2"
              marginLeft={{ base: "0", sm: "0%" }}
              marginTop="5%"
            >
              <Link textDecoration="none" _hover={{ textDecoration: "none" }}>
                <ChakraNextImage
                  borderRadius="lg"
                  src={image}
                  alt={title}
                  layout="fill"
                  objectFit="contain"
                />
              </Link>
            </Box>
...

[shrewd current]

You don't have classname on NextImage

you have added width="100%". this won't work

[late crystal]

hmm where to put that 100%

on <ChakraNextImage?

[shrewd current]

No on <Image className="image-styles"/> in your css: .image-styles { width: 100%}
I would also suspect the flex at fault, but let's start with that.

[late crystal]

hmm but it already contains the width: 100% inline here

      <Image
        objectFit="contain"
        layout="fill"
 ->     width="100%"
        src={src}
        alt={alt}
      />

am I blind? 🐒

[shrewd current]

THis is not css

this is Image prop

[late crystal]

oohh

fuck

[shrewd current]

which accepts only numbers, not strings.

[late crystal]

hahaha

xD

[shrewd current]

width={100}

but this is in pixels

If you use layout full, the widht and height prop are ignored on IMage

[late crystal]

I should be able to do something like this in Chakra

      <Image
        width={"100%"}
        objectFit="contain"
        layout="fill"
        src={src}
        alt={alt}
      />

but same issue

[shrewd current]

No, like I said. This is a prop which only accepts a number width={100}, but you're still passing string width={"100"} .But still that number is recongized as pixels, not % and is also ignored with layout="fill"

THis need to be a className

https://nextjs.org/docs/api-reference/next/image#width

https://nextjs.org/docs/basic-features/image-optimization#styling

[late crystal]

ok I got it now

    <Box boxSize="sm" position="relative" {...rest}>
      <Image layout="fill" objectFit="contain" src={src} alt={alt} />
    </Box>

boxSize makes a difference

thanks

[shrewd current]

could be, I don't know Chakra that well.