无法使用示例“with-firebase-hosting-and-typescript”在 next.js 中呈现图像答案

【问题标题】：Cannot render images in next.js with example "with-firebase-hosting-and-typescript"无法使用示例“with-firebase-hosting-and-typescript”在 next.js 中呈现图像
【发布时间】：2020-02-09 19:12:02
【问题描述】：

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

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

我的图片直接放在“根”目录下的“公共”目录中。就像“/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\> 都不渲染我的图像。

有人知道解决办法吗？

【问题讨论】：

您可以检查您是否有任何其他名为 public 的文件/目录，如示例页面所述：'注意：不要将公共目录命名为其他任何内容。名称不能更改，并且是用于提供静态资产的唯一目录。您还可以在 devTools 的网络选项卡中验证请求/响应
谢谢你的回答，bsekula。非常关键的建议。正如您所指出的，我在“src”目录中有另一个“公共”文件夹。所以，我删除了它。但是，它无法渲染。我在网络选项卡中验证了请求/响应。我确认了关于我的图像的状态 404。你能想出其他解决方案吗？还是注意到我的俯瞰？

标签： typescript image next.js src

【解决方案1】：

我不是nextjs 的家伙，但是如果您将图像部署到firebase hosting，这些图像应该在https://{yourFirebaseProject}/my-image.png 下可用（如果您将它们直接放在根目录中）。

如here 所述，默认根目录为public。

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

例如

在这种情况下<img src="/my-image1.png" alt="hoge" />，只要您尝试从托管环境提供的文件（即来自https://{yourFirebaseProject} 的 html 文件）中获取图像，您就应该能够获取图像

如果您在本地环境中运行，则可以直接从 firebase hosting 获取这些图像，例如：

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

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

如果您不想更改您的loclahost 和firebase hosting 环境的src 属性，您应该有一些后期构建过程将您的文件从localhost/public 复制到firebase-hosting/root。

例如在 localhost 上将您的图像放到 public/images 并在构建后将它们复制到 firebase-hosting-root/images

在这种情况下，您应该能够使用相同的 src 获取这些图像（一次来自本地环境，一次来自 firebase 提供的文件）

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

祝你好运！

【讨论】：