我使用 Next.JS 构建一个包含视频和图像的小型登录页面。由于资产是静态的，我假设这里的做法是创建一个静态文件夹并从那里调用视频/图像。
尽管 Next 不知何故无法找到我的资产 - 怎么会？当我在 public 目录中使用它们时，它工作正常 - 但我想这是一个不好的做法？
<img height={320} src="/static/images/hero/tag.svg" alt="" className="float-right" />
<video src="/static/video/hero.mp4" playsInline loop muted autoPlay poster="/static/video/hero-poster.jpg" />
【问题讨论】：
标签： javascript html reactjs next.js
两个选项都有有效的用例
资产 - 文件直接捆绑到编译的块中。这意味着没有额外的请求在运行时加载它，并且资产立即可用。绝对是使用图标和其他“内联”内容的方式。 （您需要为每种文件类型配备适当的 webpack 加载器。图像支持开箱即用，但其他文件类型可能需要手动配置） https://nuxtjs.org/docs/2.x/directory-structure/assets
静态 - 由网络服务器直接提供的普通静态文件。对大文件、下载、很少访问的文件等很有用。 https://nuxtjs.org/docs/2.x/directory-structure/static
在您的情况下，我建议将图像作为资产。视频可以是静态的。
【讨论】：
在 nextjs static file serving 中仅适用于公用文件夹。
你添加一张图片到public/my-image.svg，下面的代码会访问图片
return <img src="/my-image.svg" alt="my image" />
必须注意几点： 注意：不要将公共目录命名为其他任何名称。该名称不能更改，并且是唯一用于提供静态资产的目录。
注意：确保在 pages/ 目录下没有与文件同名的静态文件，因为这会导致错误。
【讨论】：