<aside> 🚧 尚未修改

</aside>

Image

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

import "./styles.css";
import AppMenu from "./ui/AppMenu";
export default function Image() {
  return (
    <div className="App">
      <AppMenu />
      **<img
        src="<https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Periodic_table_zh-tw.svg/1821px-Periodic_table_zh-tw.svg.png>"
        width="100%"
        alt="週期表"
      />**
    </div>
  );
}

Untitled

Firebase Storage

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

Untitled

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

先透過ref()，取得檔案的reference，再透過getDownloadURL()取得下載的連結，因為storage可以有權限的管控，getDownloadURL()取得的連結是經過授權的連結。

   const starsRef = ref(storage, "Ben.jpg");
   const imageUrl = await getDownloadURL(starsRef);

Image.js修改如下

import { getApps, getApp, initializeApp } from "firebase/app";
**import { getStorage, ref, getDownloadURL } from "firebase/storage";**
import { useEffect, useState } from "react";

import "./styles.css";
import AppMenu from "./ui/AppMenu";
import { firebaseConfig } from "/src/settings/firebaseConfig";

export default function Image() {
  const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApp();
  **const storage = getStorage(app);**
  const [image, setImage] = useState("");

  useEffect(() => {
    async function fetchData() {
      // You can await here
      **const starsRef = ref(storage, "Ben.jpg");**
      **const imageUrl = await getDownloadURL(starsRef);**
      setImage(imageUrl);

    }
    fetchData();
  }, [storage]); 

  return (
    <div className="App">
      <AppMenu />
      <img src=**{image}** width="50%" alt="Ben" />
      <img
        src="<https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Periodic_table_zh-tw.svg/1821px-Periodic_table_zh-tw.svg.png>"
        width="100%"
        alt="週期表"
      />
    </div>
  );
}

Untitled

使用Card

可以利用Material-UI的Card來優化圖片及文字的展示。CardContent放的是文字的內容、CardMedia放的是圖片或影片，透過這些預設的元件，可以優化圖片及文字的展示。

Image.js修改如下: