Here is my simple source code.

import React from 'react';
import styled from 'styled-components';
import logo from '../assets/logo.svg';

const LogoContainer = styled.div`
  width: 100%;
  position: absolute;
  top: 4%;
  left: calc(50% - 7%);
`;

const LogoImage = styled.img`
  width: 14%;
  height: auto;
`;

const Logo: React.FC = () => {
  return (
    <LogoContainer>
      <LogoImage src={logo} alt="Logo" />
    </LogoContainer>
  );
};

export default Logo;

It works well in my browser, and also no error from the prettier side.
But only in vscode, it returns an error for the src and background also.

No overload matches this call.
  Overload 1 of 2, '(props: PolymorphicComponentProps<"web", FastOmit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>, void, void, {}, {}>): Element', gave the following error.
    Type 'FunctionComponent<SVGProps<SVGSVGElement> & { title?: string | undefined; }>' is not assignable to type 'string'.
  Overload 2 of 2, '(props: FastOmit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>): ReactNode', gave the following error.
    Type 'FunctionComponent<SVGProps<SVGSVGElement> & { title?: string | undefined; }>' is not assignable to type 'string'.ts(2769)
index.d.ts(3252, 9): The expected type comes from property 'src' which is declared here on type 'IntrinsicAttributes & FastOmit<Substitute<FastOmit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>, FastOmit<...>>, keyof ExecutionProps> & FastOmit<...> & { ...; }'
index.d.ts(3252, 9): The expected type comes from property 'src' which is declared here on type 'IntrinsicAttributes & FastOmit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>'

capture-vscode

I’m using airbnb style eslint and prettier, typescript and react. How should I do for this error? Ignore, or some configuration change?

I’ve tried to change configuration files but I couldn’t find any solutions yet