我想在我正在开发的NextJS应用程序中使用图像(.png)。该应用程序托管在Firebase上。
我看了这个文档:https://nextjs.org/docs/api-reference/next/image。
我也在看这个:https://nextjs.org/docs/api-reference/next.config.js/custom-image-loader-config#example-loader-configuration
我看到例如:
export default function akamaiLoader({ src, width, quality }) {
return `https://example.com/${src}?imwidth=${width}`
}
但我该怎么用呢?example.com应该被我的某个URL替换吗?
我得说我很难理解这一切。
我试过这个代码:
<Image
// loader={myLoader}
src="../Images/edit.png"
alt="Some picture of mine"
width={100}
height={100}
/>
我只能看到“我的一些照片”的信息出现,但从来没有图像本身。
一些相关的提示将非常感谢。
1条答案
按热度按时间xhv8bpkk1#
所以为了使事情更容易,如果你想使用内部图像,你应该把它们放在公共文件夹中,因为该文件夹被视为路由
/
。/favicon.ico
/Images/edit.png
然后,您可以在
NextImage
(Images
)组件上使用它们,如:或者你可以使用relative或absolute import静态导入图像。
您不需要使用自定义加载器,除非您有一些用例需要它。