How to use the @xstyled/styled-components.img function in @xstyled/styled-components

/* eslint-disable react/no-unescaped-entities */
import React from 'react'
import styled, { Box } from '@xstyled/styled-components'
import { Button } from '@smooth-ui/core-sc'
import { Card, CardHeader, CardTitle, CardBody, CardText } from 'components'
import { useHiddenState, Hidden, HiddenDisclosure } from 'reakit/Hidden'
import { getStatusColor } from 'modules/build'
import configBrowser from 'configBrowser'

function getS3Url(s3Id) {
  return `https://${configBrowser.get(
    's3.screenshotsBucket',
  )}.s3.amazonaws.com/${s3Id}`
}

const StyledImg = styled.img`
  width: 100%;
  display: block;
`

function ScreenshotDiffItem({
  jobStatus,
  score,
  compareScreenshot,
  baseScreenshot,
  s3Id,
  validationStatus,
}) {
  const hidden = useHiddenState({
    visible: validationStatus !== 'accepted',
  })
  let status = jobStatus

{image ? (
            
              {image}
            
          ) : null}
        
      
    
  )
}

const StyledShowcaseImg = styled.img`
  ${variant({
    variants: {
      build: css`
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 4;
        max-height: 298.5rpx; // 2x ratio

        ${up(
          'sm',
          css`
            max-height: 380rpx;
          `,
        )}
      `,
      perfect: css`
        ${down(

import styled from '@xstyled/styled-components'

export const Ad = styled.a`
  display: block;
  background-color: darker;
  border-radius: 3;
  padding: 8;
  display: flex;
`

export const AdImg = styled.img`
  width: 130;
  height: 100;
  margin-right: 8;
  flex-shrink: 0;
`

export const AdText = styled.div`
  font-size: 14;
  line-height: 1.4;
  font-weight: 400;
  color: lighter;
  width: 200;
`