我无法加载Next.js图像在直接路径与外部网站的形象

b4qexyjb  于 2023-06-05  发布在  其他
关注(0)|答案(1)|浏览(136)

我使用Next.js v13.4.4。
错误就在这里,当然,它不会来自静态图像。

Error: An object should only be passed to the image component src parameter 
if it comes from a static image import. 
It must include height and width. 
Received {"src":"https://lh3.googleusercontent.com

我的下一个配置如下:

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**.googleusercontent.com",
        port: "",
        pathname: "/**",
      },
    ],
  },

我的客户端组件在这里:

"use client"
import Image from "next/image"

export default function ImageComponent(src: any) {

  return <Image src={src} alt="user-image" height={38} width={38} fill />
}
klh5stk1

klh5stk11#

我找到原因了。我忘了在参数中使用{}括号。这就是为什么在参数的“src”中有另一个“src”的原因。这是正确的代码。

"use client"
import Image from "next/image"

export default function ImageComponent({src}: any) {

  return <Image src={src} alt="user-image" height={38} width={38} fill />
}

相关问题