javascript 未处理的运行时错误TypeError:尝试使用next.js的Image组件时无法读取undefined的属性(阅读“call”)

x6492ojm  于 2022-12-17  发布在  Java
关注(0)|答案(2)|浏览(178)

我正在尝试使用next.js提供的Image组件。
这是我的简单标题组件

import Image from 'next/image'
import React from 'react'
import myImage from '../assets/IMG-20221115-WA0001.jpg'

function Header() {
  return (
    <header>
        <div>
            <div>
                <Image
                    src={myImage}
                    width={50}
                    height={10}
                    alt="Logo"
                />
            </div>
        </div>
    </header>
  )
}

export default Header

这个错误似乎是来自webpack的error window,所以我不知道如何解决它。

rqqzpn5f

rqqzpn5f1#

您可以将图像移动到/public文件夹,并将路径传递给src Image属性

import Image from 'next/image'
import React from 'react'

function Header() {
  return (
    <header>
        <div>
            <div>
                <Image
                    src={'/IMG-20221115-WA0001.jpg'}
                    width={50}
                    height={10}
                    alt="Logo"
                />
            </div>
        </div>
    </header>
  )
}

export default Header

要使Next/Image正常工作,您需要提供路径请参见https://nextjs.org/docs/api-reference/next/image#src
注意:你可以将图像保留在相同的路径中并将其传递给src属性,但是使用相对路径而不是静态导入

osh3o9ms

osh3o9ms2#

你需要添加require来给出绝对路径

import Image from 'next/image'
import React from 'react'
import myImage from '../assets/IMG-20221115-WA0001.jpg'

function Header() {
  return (
    <header>
        <div>
            <div>
                <Image
                    src={require(myImage)}
                    width={50}
                    height={10}
                    alt="Logo"
                />
            </div>
        </div>
    </header>
  )
}

export default Header

相关问题