如何将 Public 文件夹中的图像/内容加载到 NextJs 中的动态路由页面？

Question

How do I load an image from the Public folder into a dynamic route in NextJs?

In the docs I saw nothing about this... It is stated that we can add content from the Public file - for example <img src="/Content/image.jpg" alt="some alt" /> . Yet, if I am in a dynamic routed page, for example /pages/post/[id].js The solution presented in Next's docs does not work, nothing is loaded.

How is this tackled, best practices, etc?

Answer 1

All assets that are in the public folder will be available like any resource on the internet.

It is probably a matter of path, if you serving your app from example.com , and your images has /Content/image.jpg (pay attention to the first slash, this tells to the browser to start at the root ) in this case, the absolute path is relative to the domain and not to the path that the page is served at.

This means that there is no affect of dynamic routes on the images path.

Just make sure that your public folder has Content (make sure that the folder starts with capital C ) folder.