如何使用 next/image 组件在 Next.js 中获取干净图像 URL

Ada*_*ill 5 url image url-rewriting next.js next-router

我想知道如何使用 Next.js 中的 next/image 组件获取干净的图像 url。

当前 URL 示例如下:

https://www.example.com/_next/image?url=%2Fimages%2Fhome%2FDog-image-1.jpg&w=384&q=100

是否可以每次都更改上面的 URL,如下面的 URL:

https://www.example.com/_next/image/Dog-image-1.jpg

或者像这样:

https://www.example.com/_next/image/images/home/Dog-image-1.jpg

如何使用图像的 next/image 组件获取干净的 URL。

感谢您的参与。

Y H*_*H R 0

/name.format如果图像资源位于应用程序public根目录的文件夹中,则可以通过输入 URL 直接访问它们Next.js

\n

例子:

\n
    \n
  • 如果我希望访问Dog-image-1.jpg在文件夹根目录public(无子目录) \xe2\x80\x94 中找到的文件,我需要输入https://www.example.com/Dog-image-1.jpg

    \n
  • \n
  • 如果我希望通过该图像访问同一图像,https://www.example.com/image/Dog-image-1.jpg则需要image在该目录中创建一个子文件夹public

    \n
  • \n
\n

图像可以尽可能嵌套,只需创建适当的子文件夹即可。

\n

这是你想要的?

\n

否则您可能会对此感兴趣。

\n