开发者

Type 'StaticImageData' is not assignable to type 'CSSObject'

I am making this short project in TS, NextJS and Styled Components. In my homepage I am trying to display a background image. and I did it like this.

import styled from "styled-components";
import titleLogo from "../assets/Logo.png";
import backgroundImage from "../assets/Background.png";
import Image from "next/image";

const Wrapper = styled.div`
  background-image: url(${backgroundImage}); //this line giving me error
  mix-blend-mode: saturation;
  opacity: 0.6;
`;

const ImageWrapper = styled.image`
  display: flex;
  justify-content: center;
  margin-top: 58px;
`;

export default function HomePage() {
  return (
    <Wrapper id="home">
      <ImageWrapper>
        <Image src={titleLogo} />
      </ImageWrapper>
    </Wrapper>
  );
}

in the background-image property, I am getting this error from TS

No overload matches this call.
  Overload 1 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, &开发者_开发技巧quot;key" | keyof HTMLAttributes<...>> & { ...; }, any>>, ...rest: Interpolation<...>[]): StyledComponent<...>', gave the following error.
    Argument of type 'StaticImageData' is not assignable to parameter of type 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & { ...; }, any>>'.
      Type 'StaticImageData' is not assignable to type 'CSSObject'.
        Index signature for type 'string' is missing in type 'StaticImageData'.
  Overload 2 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & object, any>>, ...rest: Interpolation<...>[]): StyledComponent<...>', gave the following error.
    Argument of type 'StaticImageData' is not assignable to parameter of type 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & { ...; } & object, any>>'.
      Type 'StaticImageData' is not assignable to type 'CSSObject'.ts(2769)

Am I importing the image wrong? what is the right way to do this?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜