我用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\>
都不能渲染我的图像。
有人知道解决办法吗?
2条答案
按热度按时间9bfwbjaz1#
Firebase Hosting与Next.js和TypeScript结合使用时,由于某些实验性功能,可能会遇到渲染图像的问题。要解决此问题,请考虑将以下配置添加到您的next.js.js文件中:
字符串
此处的关键添加是设置图像:{ unoptimized:true },这有助于解决图像渲染问题。由于Firebase Hosting和Next.js正在发展,并且某些功能可能仍处于试验阶段,因此可能需要进行此调整。
我希望这能解决你的问题。如果你遇到进一步的挑战,随时提供更多的细节,以获得额外的帮助。
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
获取这些映像,如下所示:字符串
如果你把你的图片放在你的firebase根文件夹的不同文件夹下,你需要相应地调整url。
如果您不想更改
loclahost
和firebase hosting
环境的src
属性,则应该有一些后期构建过程,将文件从localhost/public
复制到firebase-hosting/root
。例如,在localhost上将您的图像放到
public/images
,构建后将其复制到firebase-hosting-root/images
在这种情况下,您应该能够使用相同的
src
获取这些映像(一次来自本地环境,一次来自firebase提供的文件)型
祝你好运!