在網頁裡要顯示圖片或影片其實很簡單,可以利用html裡的img,就可以顯示圖片了,可以透過width設定大小,如果設定100%,就是占螢幕的100%。alt是讓看不到圖片的人可以「讀」到圖片的內容。
<img src="<https://drive.google.com/uc?id=1QaJkre-y6ckaBZL9dJ5rVqIE-q0paCGg>" alt="image" width="30%" />
在Next.js,會建議我們使用Image
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的服務,這個服務其實跟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,就好了!