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?
精彩评论