属性“src”的类型在nextjs/image中不兼容

rseugnpd 于 2022-12-26 发布在其他

关注(0)|答案(4)|浏览(165)

我正在使用react dropzone在我的简单应用程序中上传多个图像。为了显示哪种类型的图像被删除，我用TypeScript做了一个单独的组件。但Next.js图像源代码显示错误，如类型：

'{ src: string; alt: string; }' is not assignable to type 'IntrinsicAttributes & ImageProps'.
  Type '{ src: string; alt: string; }' is not assignable to type 'ObjectImageProps'.
    Types of property 'src' are incompatible.
      Type 'string' is not assignable to type 'StaticImport'.

RenderFiles.ts:

import { IFile } from "../../libs/types";
import { sizeInMb } from "../../libs/sizeInMb";
import { FunctionComponent } from "react";
import Image from "next/image"

const RenderFile: FunctionComponent<{
  file: IFile;
}> = ({ file: { formate, sizeInBytes, name } }) => {
  return (
    <div>
      <Image src={`/images/${formate}.png`} alt="image"/>
      <span>{name}</span>
      <span>{sizeInMb(sizeInBytes)}</span>
    </div>
  );
};

export default RenderFile;

types.ts:

export interface IFile {
  name: string;
  sizeInBytes: number;
  formate: string | number;
  id?: string;
}

src prop 我错在哪里了？

next.js

来源：https://stackoverflow.com/questions/68148204/types-of-property-src-are-incompatible-in-nextjs-image

4条答案

按热度按时间

kkbh8khc1#

问题是next/image的Image需要相当复杂的类型ImageProps作为它的 prop ：

type StringImageProps = {
  src: string
} & (
  | { width?: never; height?: never; layout: 'fill' }
  | {
      width: number | string
      height: number | string
      layout?: Exclude<LayoutValue, 'fill'>
    }
) &
  (
    | {
        placeholder?: Exclude<PlaceholderValue, 'blur'>
        blurDataURL?: never
      }
    | { placeholder: 'blur'; blurDataURL: string }
  )

type ObjectImageProps = {
  src: StaticImport
  width?: number | string
  height?: number | string
  layout?: LayoutValue
  placeholder?: PlaceholderValue
  blurDataURL?: never
}

export type ImageProps = Omit<
  JSX.IntrinsicElements['img'],
  'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading' | 'style'
> & {
  loader?: ImageLoader
  quality?: number | string
  priority?: boolean
  loading?: LoadingValue
  unoptimized?: boolean
  objectFit?: ImgElementStyle['objectFit']
  objectPosition?: ImgElementStyle['objectPosition']
} & (StringImageProps | ObjectImageProps)

因为你不是从本地导入文件中导入图像，所以你剩下的唯一结构是StringImageProps。为了符合这个结构，你必须提供以下 prop 集之一：

<Image src={string} layout="fill" />
// or
<Image src={string} width={number} height={number} /> // with optional `layout` prop but not of type 'fill'

两种变体都可以用可选的placeholder（不是“模糊”类型）或必需的placeholder: 'blur' * 和 * blurDataURL: string来扩展。
并且只有在此之后，您才可以将原生image的属性提供为alt。

赞(0）回复(0）举报 2022-12-26

xmd2e60i2#

导入ImageLoaderProps的类型为我解决了这个问题。
示例：

import Image from 'next/image';
import type { ImageLoaderProps } from 'next/image';

const myLoader = ({ src, width, quality }: ImageLoaderProps) => {
  return `https://example.com/?${src}?w=${width}&q=${quality}`;
};

export default function TestComponent(props: Record<string, string>) {
  const { imageResource } = props;
  return (
        <Image
          loader={myLoader}
          src={`/${imageResource}`}
          width="20%"
          height="20%"
        />
  );
}

赞(0）回复(0）举报 2022-12-26

2fjabf4q3#

我省略了placeholder、blurDataURL和layout。我还将src显式地设置为字符串。有关此问题的更多信息：https://github.com/vercel/next.js/issues/26735

赞(0）回复(0）举报 2022-12-26

mklgxw1f4#

只需将string转换为any

<Image src={'string' as any} alt='Pic' />

赞(0）回复(0）举报 2022-12-26

我来回答

属性“src”的类型在nextjs/image中不兼容

4条答案

相关问题

热门标签

最新问答