Next.js 13中图片与视频无法显示问题求助（附代码）

核心问题是静态资源路径错误：Next.js 中public目录是静态资源的根目录，引用时不需要在路径中添加/public，直接从根路径开始编写即可。以下是具体修正步骤：

1. 图片路径修正（Next.js Image 组件） #

将原代码中src={"/public/images/logo.png"}修改为src={"/images/logo.png"}，去掉多余的/public前缀。

2. 视频路径修正 #

将视频的src={'/public/images/about video.mp4 '}修改为src={'/images/about video.mp4'}，同时去掉末尾的多余空格，避免路径匹配失败。

修改后的完整代码 #

import { Flex } from "@chakra-ui/react";
import Image from 'next/image';

const Navbar: React.FC = () => {
    
    return (
        <>
        <Flex bg="white" height="44px" padding="6px 12px">
            <Flex>
                <Image 
                    src="/images/logo.png" 
                    alt='Apex Logo' 
                    width={350} 
                    height={300} 
                />
            </Flex>
        </Flex>
        <video 
            src="/images/about video.mp4" 
            controls 
            style={{ height: '100%', width: '100%' }}
        ></video>
        </>
    )
}
export default Navbar;

额外检查项 #

• 确认public/images目录已创建，且logo.png、about video.mp4文件确实存在于该目录下，文件名大小写与代码中一致（Linux/macOS环境下大小写敏感）。
• 若使用Next.js 13 App Router，本地图片无需额外配置next.config.js，仅远程图片需要添加images.remotePatterns规则。

内容的提问来源于stack exchange，提问作者moustapha nassr