在NextJS应用程序中使用PNG图像

holgip5t  于 2023-05-06  发布在  其他
关注(0)|答案(1)|浏览(141)

我想在我正在开发的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}
/>

我只能看到“我的一些照片”的信息出现,但从来没有图像本身。
一些相关的提示将非常感谢。

xhv8bpkk

xhv8bpkk1#

所以为了使事情更容易,如果你想使用内部图像,你应该把它们放在公共文件夹中,因为该文件夹被视为路由/

  • public/favicon.ico =〉/favicon.ico
  • public/Images/edit.png =〉/Images/edit.png

然后,您可以在NextImageImages)组件上使用它们,如:

<Image
  src='/Images/edit.png'
  alt="Some picture of mine"
  width={100}
  height={100}
 />

或者你可以使用relative或absolute import静态导入图像。

import editImg from '../Images/edit.png';

// ...
// in your component
  <Image
   src={editImg}
   alt="Some picture of mine"
   width={100}
   height={100}
  />

您不需要使用自定义加载器,除非您有一些用例需要它。

相关问题