Next js中如何正确导入图片和视频

Question

我只想问下nextjs中如何正确导入图片和视频？我的图像不会像这样加载到嵌套路由页面上 -> localhost:3000/about/missionVision 但它可以在单个路径上工作，像这样 -> localhost:3000/about

这是带有图片的组件的代码，它不会在嵌套 route/page 上加载。

import React, { Fragment } from "react";

const Banner= () => {
    return(
        <Fragment>
            <header className="banner">
                <div className="container">
                    <div className="logo">
                        <img src="./images/logo.png" alt="our logo"/>
                    </div>
                </div>
            </header>
        </Fragment>
    )
}

export default Banner;

我以前都是用这种格式导入的，但是导入videos/mp4个文件总是报错，而且图片不显示。（我将 cra 迁移到 next）

import React, { Fragment } from "react";
import logo from "./../../public/images/logo.png";

const Banner= () => {
    return(
        <Fragment>
            <header className="banner">
                <div className="container">
                    <div className="logo">
                        <img src={ logo }/>
                    </div>
                </div>
            </header>
        </Fragment>
    )
}

export default Banner;

这是我的文件结构

root folder
    components
        Banner
            -index.js
    page
    public
        images
        videos

谢谢！

编辑：这是我尝试导入视频时显示的错误。

Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See 
https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Answer 1

无需导入 public 路径，只需尝试从 public 路径访问即可。

Next js中如何正确导入图片和视频

How to properly import images and videos in Next js

import

image

reactjs

next.js