如何在Next JS中正确展示assets文件夹下的本地视频？

该报错本质是项目构建工具未配置视频类静态资源的解析规则，无法识别.mp4格式文件导致，和引入语法无关，可按你使用的构建工具对应配置解决：

Webpack（含vue-cli、create-react-app等基于webpack封装的脚手架） #

webpack4版本 #

• 先安装file-loader依赖：
  npm install file-loader --save-dev
• 在webpack配置文件的module.rules数组中新增如下规则（vue-cli项目写在vue.config.js的configureWebpack字段中，create-react-app项目需eject后修改webpack配置或使用customize-cra覆盖规则）：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(mp4|webm|ogg|mp3|wav)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[hash:8].[ext]',
            outputPath: 'assets/media/'
          }
        }
      }
    ]
  }
}

webpack5版本 #

无需安装额外loader，直接使用内置的Asset Modules配置即可，在module.rules中新增：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(mp4|webm|ogg|mp3|wav)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/media/[name].[hash:8][ext]'
        }
      }
    ]
  }
}

Vite项目 #

Vite默认支持mp4等媒体资源解析，如出现该报错，检查vite.config.js中是否覆盖了assetsInclude配置，补充mp4格式即可：

import { defineConfig } from 'vite'
export default defineConfig({
  assetsInclude: ['**/*.mp4']
})

配置完成后的引入方式 #

• CommonJS require方式（仅webpack支持）：
  <video src={require("../assets/videos/video.mp4").default} controls />
• ES Module import方式（全场景通用）：
  先在文件顶部引入资源：
  import videoSrc from "../assets/videos/video.mp4"
  再在标签中使用：
  <video src={videoSrc} controls />

内容的提问来源于stack exchange，提问作者Saif Essam