无法在 next.js 中渲染图像，例如“with-firebase-hosting-and-typescript”

Question

我使用 firebase 托管和 typescript 设置了 next.js 项目。 我安装了 Material-UI。

然后，我尝试渲染我的图像。 根据下面的例子。 https://nextjs.org/docs/basic-features/static-file-serving

我的图片放在“root”目录下的“public”目录中。就像“/public/my-image1.png”

我的源代码是...

import App from '../components/App';
import { 
  Container,
  Avatar,
} from '@material-ui/core';

export default () => (
  <App>
    <p>Index Page</p>
    <Container>
      <img src="/my-image1.png" alt="hoge" />
      <Avatar src="/my-image2.png" alt="fuga" />
    </Container>
  </App>
)

<img>

和

<Avatar\>

都没有渲染我的图像。

有谁知道解决办法吗？

Answer 1

Firebase Hosting 与 Next.js 和 TypeScript 结合使用时，由于某些实验性功能，可能会遇到渲染图像的问题。要解决此问题，请考虑将以下配置添加到 next.config.js 文件中：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export", // (optional) Set your desired output configuration
  images: {
    unoptimized: true,
  },
};

module.exports = nextConfig;

这里关键的补充是设置 images: { unoptimized: true }，这可以帮助解决图像渲染问题。随着 Firebase Hosting 和 Next.js 的不断发展，这种调整可能是必要的，并且某些功能可能仍处于实验阶段。

我希望这能为您解决问题。如果您遇到更多挑战，请随时提供更多详细信息以获得额外帮助。

Answer 2

我不是

nextjs

人，但是如果您将映像部署到

firebase hosting

，这些映像应该在

https://{yourFirebaseProject}/my-image.png

下可用（如果您将它们直接放在根目录中）。

如这里所述默认根目录是

public

。

公共根目录的默认名称为 public。

例如

在这种情况下

<img src="/my-image1.png" alt="hoge" />

只要您尝试从托管环境提供的文件（即来自

https://{yourFirebaseProject}

的html文件）中获取图像，您就应该能够获取图像

如果您在本地环境中运行，您可以直接从

firebase hosting

获取这些图像，例如：

<img src="https://{yourFirebaseProject}/my-image.png" alt=""> 

如果您将图像放在 Firebase 根文件夹中的不同文件夹下，则需要相应地调整 url。

如果您不想更改

src

和

loclahost

环境的

firebase hosting

属性，则应该进行一些构建后过程，将文件从

localhost/public

复制到

firebase-hosting/root

。

例如 在本地主机上将图像放入

public/images

并在构建后将它们复制到

firebase-hosting-root/images

在这种情况下，您应该能够使用相同的

src

获取这些图像（一次来自本地环境，一次来自 firebase 提供的文件）

<img src="/images/my-image.png" alt="my image" />

祝你好运！