從 AWS SES 轉寄信件無法正確顯示內嵌圖片談起:MIME 內嵌圖片原理與實踐

我遇到了什麼問題 最近我用 SES, S3, Lambda 開發了轉寄信件的功能,簡單介紹一下這功能: 假設我就職於公司的開發部門,我們對外有一個信箱是 dev@example.com 當客戶遇到軟體開發上的問題時寄信到 dev@example.com,開發部門的所有同仁就會在自己的信箱收到此客戶寄來的電子郵件,重點是開發部門的同仁們都可以用自己的帳號回覆該客戶 而開發好這功能後,我遇到一個問題 — 轉寄出去的信件沒辦法正確顯示內嵌圖片 關於轉寄信件的程式碼我放在 GitHub 上囉 (連結),之後有時間會寫一篇 Forward Email 的完整教學,或是也可以關注我的 Notion,我每天都會寫筆記記錄自己的學習過程 讓我們直接看例子 首先,我登入私人帳號模擬我是客戶,寄信給 test@aws-educate.tw,下圖是當時寄出去的內容: 寄給 test@aws-educate.tw 後,SES 會收到信,然後根據我配置的 Receipt rule,原始郵件檔案會被儲存至我指定的 S3 Bucket 延續 用 SES, S3, Lambda 實現轉寄信件功能 ,當我嘗試在轉寄出去的信件中內嵌圖片,最後收到轉寄來的信,都會出現下圖的現象:圖片沒辦法內嵌在裡面,倒是跑去附件了 寫文章時,已經把原本轉寄過來的信件刪了,所以下圖信件主旨跟前一張圖片不一樣不要介意,下圖信件已經詮釋我想表達的現象了 XD 我起初嘗試的解法 後來下面這篇 Stack Overflow,裡面有人提到 Gmail 還不支援顯示 base64 編碼的圖片 (有待確認,希望有人可以告訴我正確答案) As of January 2020, Gmail still does not support base64 encoded images. Source: Add embedded image in emails in AWS SES service...

August 6, 2024 · 2 min

在 Next.js 音樂應用中使用動態 Preload 技術提升前端效能降低延遲

程式碼在這邊的 feature/preload 分支: https://github.com/sh1un/Nextjs-Musive-app 此專案是一個 Next.js 專案,原作者為 Ansh Rathod,我已經過作者本人授權使用,因此 Fork 過來稍微改了一下。 我本身不是一名專精於前端技術的開發者,所以我所修改的 Code 都是由 ChatGPT-4 產生的。我今天這樣做的主要目的是想實驗 preload 是否能做到效能優化,以此來做一個簡單的 PoC。 補充一下,這篇文章的內容本來是要放在 「2024 AWS Educate 陪跑計畫的獎勵課程 - 雲端串流挑戰:復刻 Spotify 的技術旅程」中教學,此工作坊旨在教學如何利用 CloudFront 優化速度與降低延遲,但礙於當天工作坊的內容太滿已經塞不下了,所以當天工作坊就沒有講到 Preload,如果看到這篇文章,想要學學 CloudFront 歡迎參觀我們當天的教材 (連結) 什麼是 Preload? Preload 是一種網頁性能優化技術,讓瀏覽器在頁面加載時預先加載指定的資源,這樣在使用這些資源時可以更快地顯示或播放。這可以減少等待時間,提升用戶體驗。 你可以想成:原本你是要“按下去播放按鈕”才會開始下載音樂,現在我們提前幫你下載,你之後“按下去播放按鈕”就會立即播放。 舉例 如果你在網頁上有一段影片或音樂,你可以用 preload 告訴瀏覽器提前下載這些文件,這樣當用戶點擊播放按鈕時,影片或音樂就會立即播放,而不是先等待下載。 基本用法: 在 HTML 中,你可以在 <link> 標籤中使用 rel="preload" 來預加載資源。例如: <link rel="preload" href="path/to/your/file.mp3" as="audio"> 這樣,瀏覽器會在頁面加載時預先下載 file.mp3,提高用戶播放音樂的速度。 動態 Preload 的實現思路 每個用戶的歌單都不一樣,所以我們當然不希望把 preload 的 href 寫死成一個 URL。 解決方案 我們可以通過以下幾個步驟來實現動態的 preload: API 獲取歌單: 伺服器端提供一個 API,根據用戶的請求返回該用戶的歌單。這個 API 返回一個 JSON 結構,其中包含了音樂檔案的 URL 列表。 JavaScript 動態生成 Preload 標籤: 使用 JavaScript 在頁面加載後動態地從 API 獲取歌單,並為每個音樂文件創建 preload 標籤,將其添加到頁面的 <head> 中。 具體實現 注意⚠️ 我的寫法並非添加 preload 到頁面的 <head>,而是直接用 React 和 JS 本身提供的內建物件來達到同樣效果,詳見本段說明。...

July 21, 2024 · 4 min