NextJS图像参考“找不到模块”

Question

nextjs的新功能，希望了解更多有关将图像src传递给组件的信息。因此，我创建了一个“文本左图像右”组件，您可以在其中设置图像src。这需要使用 require （用于优化下一张图片）。但是无论我如何尝试，我总是会收到“找不到模块”错误。

Error: Cannot find module '../../../public/img/logo.png?webp'

nextJS应用程序在“ src”文件夹中运行。

左文字右图像部分：

import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Image from 'react-bootstrap/Image'

export default function TextLeftImageRight({ children, title = 'This is the default title', image }) {
    const src = require(image);
    return (
    <Col>
        <Row>
            <Col>
                <h2>{title}</h2>
                {children}
            </Col>
            <Col>
                <Image src={src} fluid />
            </Col>
        </Row>
        </Col>
    )
}

index.js

import Head from 'next/head'
import Layout from '../components/Layouts/Layout'
import PageHero from '../components/Heros/PageHero'
import TextLeftImageRight from '../components/Content/TextLeftImageRight'

export default function Home() {
    // const image = require("../../public/img/logo.png?webp");
  return (
    <Layout>
        <PageHero title="Welcome" intro="Hello"></PageHero>
        <TextLeftImageRight title="Welcome" image="../../../public/img/logo.png?webp">
            <p>Nope</p>
        </TextLeftImageRight>
    </Layout>
  )
}

文件夹结构

/frontend
-> public/img/
-> src/components/Content/TextLeftImageRight.js
-> src/pages/index.js

当我手动引用它时，它可以工作...也尝试了多个../ ..等，但没有任何效果。