[Javascript] 透過 Fetch 讓圖片 load base64 的圖片

2020-09-28

一個看似沒啥用但是有一些特殊用途的東西,簡單的說,就是我有一個圖片我把這圖轉轉成 base 64 之後,存成一個線上的檔案副檔名可能是 .txt or .html 之類的 ( ex. https://raw.githubusercontent.com/ctimggit/storage1/master/base64/test1.txt ) ,當然這個網址不能直接填在 img 的 src 中,雖然內容可以,接下來就是使用 ES 的 fetch 取得內容回來後再去載入到各圖之中..





程式碼中,我制定一個 class 叫做 b64i 只要是 b64i 的我就去讀取它的 data-src 並且 fetch 回來後再塞入  該 img 中的 src

sample code :



result :


雖然看似沒啥用,但是最近因為要做一些奇怪的用途規避一些事情,反正都寫了,就記錄一下,給之後需要用到的人..


當麻許的超技八 2014 | Donma Hsu Design.