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

Question

我就是想问一下如何在nextjs中正确导入图片和视频？我的图像无法在嵌套路由页面上加载，例如 -> localhost:3000/about/missionVision 它可以在单个路径上运行，例如 -> localhost:3000/about

这是没有在嵌套路由/页面上加载的图像组件的代码。

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;

我以前使用这种格式导入，但是导入video/mp4文件时总是出错，而且图片不显示。 （我将 cra 迁移到下一个）

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

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