Kan inte rendera bilder i next.js med exemplet "with-firebase-hosting-and-typescript"

Jag satte upp ett next.js-projekt med firebase hosting och typescript. Och jag installerade Material-UI.

Sedan försökte jag rendera min bild. Enligt följande exempel. https://nextjs.org/docs/basic-features/static-file-serving

Mina bilder placerades i mappen "public" direkt under mappen "root". Det är som "/public/my-image1.png"

Och min källkod är...

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

Både <img> och <Avatar\> visar inte min bild.

Vet någon en lösning?

Svar #1

Det verkar som att Firebase Hosting, tillsammans med Next.js och TypeScript, kan stöta på problem med att rendera bilder på grund av vissa experimentella funktioner. För att lösa detta, överväg att lägga till följande konfiguration i din next.config.js-fil:

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

module.exports = nextConfig;

Den viktiga tillägget här är att ange bilder: { unoptimized: true }, vilket kan hjälpa till att åtgärda problemet med bildrendering. Denna justering kan vara nödvändig eftersom Firebase Hosting och Next.js utvecklas, och vissa funktioner kan fortfarande vara i ett experimentellt stadium.

Jag hoppas att detta löser problemet för dig. Om du stöter på fler utmaningar, tveka inte att ge mer information för ytterligare hjälp.

Svar #2

Jag är inte nextjs-typen, men om du har distribuerat dina bilder till firebase hosting, borde dessa bilder vara tillgängliga under https://{yourFirebaseProject}/my-image.png (om du placerade dem direkt i rotkatalogen).

Som angivet här är standardrotkatalogen public.

Standardinställningen för den offentliga rotmappen kallas public.

t.ex.

I det här fallet <img src="/my-image1.png" alt="hoge" /> bör du kunna hämta bilder så länge du försöker hämta dem från filer som serveras från din värdmiljö (dvs. din html-fil från https://{yourFirebaseProject})

Om du kör på din lokala miljö kan du få dessa bilder direkt från firebase hosting som:

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

Om du placerar dina bilder i en annan mapp i din rotmapp för Firebase, behöver du justera URL:en därefter.

Om du inte vill ändra src-attributet för din localhost- och firebase hosting-miljö, bör du ha någon post-build-process som kopierar dina filer från localhost/public till firebase-hosting/root.

t.ex. På localhost, lägg dina bilder i public/images och efter bygg, kopiera dem till firebase-hosting-root/images

I så fall borde du kunna få dessa bilder med samma src (en gång från den lokala miljön och en gång från filer som serveras av Firebase)

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

Lycka till!

Relaterade artiklar