next.js done with typescript 无法识别我的视频文件

Question

我运行在我的项目中遇到了一个问题，该问题是在 next.js、typescript、tailwindcss 中完成的。我正在为网站制作标头广告，我希望背景是视频。出于某种原因，该视频未被识别，我尝试将其放入不同的目录，导入 import Background "./material-bg.mp4" 甚至将文件从 mp4 转换为 webm，因为它最初是一个 mp4 文件。我试过如果只有这个特定的视频没有被识别，当我使用 jpg 时是这样，但如果它是视频则不是。我认为识别视频本身存在问题，因为它也无法识别其他视频。提前致谢！

<video autoPlay loop muted playsInline className='absolute w-full h-full object-cover'>
            <source src="./material-bg.webm" type='video/webm; codecs=vp9'/>
        </video>

Answer 1

来自next.js docs:

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

因此，在项目的根目录中创建一个名为 public 的文件夹，将静态文件放入此文件夹中，在您的情况下是视频文件，因此只需保留 src 路径照原样，它现在应该可以工作了。

next.js done with typescript 无法识别我的视频文件

My video file is not recognized by next.js done with typescript

typescript

next.js

tailwind-css