Image

在網頁裡要顯示圖片或影片其實很簡單，可以利用html裡的img，就可以顯示圖片了，可以透過width設定大小，如果設定100%，就是占螢幕的100%。alt是讓看不到圖片的人可以「讀」到圖片的內容。

<img src="<https://drive.google.com/uc?id=1QaJkre-y6ckaBZL9dJ5rVqIE-q0paCGg>" alt="image" width="30%" />

在Next.js，會建議我們使用Image

• <Image>

• next/image Un-configured Host

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  **images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "drive.google.com",
        port: "",
        pathname: "/**",
      },
    ],
  },**
};

module.exports = nextConfig;

接下來會看到:

<Image src="<https://drive.google.com/uc?id=1QaJkre-y6ckaBZL9dJ5rVqIE-q0paCGg>" alt="image" **priority={true}** height={300} width={300} />

Firebase Storage

Firebase提供storage的服務，這個服務其實跟google drive很像，可以將檔案上傳，並且讀取。先利用Firebase Console上傳檔案

另外，要記得next.config.js內容要加上firestorage:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: **"firebasestorage.googleapis.com"**,
        port: "",
        pathname: "/**",
      },
      {
        protocol: "https",
        hostname: "drive.google.com",
        port: "",
        pathname: "/**",
      },
    ],
  },
};

module.exports = nextConfig;

下載檔案可以透過Firebase提供的API來取得檔案的URL，再把url放在src，就好了!