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

问题描述

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

reactjs reactjs require require