Cannot render images in next.js with example "with-firebase-hosting-and-typescript"

Question

I set up next.js project with firebase hosting and typescript. And I installed the Material-UI.

Then, I tried to render my image. According to following example. https://nextjs.org/docs/basic-features/static-file-serving

My Images put in "public" directory directly under "root" directory. It's like "/public/my-image1.png"

And my source code is...

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>
)

Both of <img> and <Avatar\> don't render my image.

Does anyone know a solution?

Answer 1

It seems that Firebase Hosting, in conjunction with Next.js and TypeScript, may encounter issues with rendering images due to some experimental features. To resolve this, consider adding the following configuration to your next.config.js file:

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

module.exports = nextConfig;

The key addition here is setting images: { unoptimized: true }, which can help address the image rendering problem. This tweak might be necessary as Firebase Hosting and Next.js are evolving, and certain features may still be in an experimental stage.

I hope this resolves the issue for you. If you encounter further challenges, feel free to provide more details for additional assistance.