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

tkclm6bt 于 5个月前发布在 TypeScript

关注(0)|答案(2)|浏览(69)

我用firebase hosting和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\>都不能渲染我的图像。
有人知道解决办法吗？

next.js

来源：https://stackoverflow.com/questions/60125925/cannot-render-images-in-next-js-with-example-with-firebase-hosting-and-typescri

2条答案

按热度按时间

9bfwbjaz1#

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

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

module.exports = nextConfig;

字符串
此处的关键添加是设置图像：{ unoptimized：true }，这有助于解决图像渲染问题。由于Firebase Hosting和Next.js正在发展，并且某些功能可能仍处于试验阶段，因此可能需要进行此调整。
我希望这能解决你的问题。如果你遇到进一步的挑战，随时提供更多的细节，以获得额外的帮助。

赞(0）回复(0）举报 5个月前

x33g5p2x2#

我不是nextjs的家伙，但如果你把你的图像部署到firebase hosting，这些图像应该在https://{yourFirebaseProject}/my-image.png下可用（如果你把它们直接放在根目录下）。
如前所述，here默认根目录是public。
公共根目录的默认值称为public。
例如
x1c 0d1x的数据
在这种情况下，<img src="/my-image1.png" alt="hoge" />你应该能够得到图像，只要你试图从你的托管环境提供的文件（即你的html文件从https://{yourFirebaseProject}）
如果您在本地环境中运行，则可以直接从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" />

型
祝你好运！

赞(0）回复(0）举报 5个月前

我来回答

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

2条答案

相关问题

热门标签

最新问答