
內容簡介
此外掛在 WPGraphQL 中生成 MediaItem 的 DataUrl。
這是 awsome WPGraphQL 外掛 (https://github.com/wp-graphql/wp-graphql) 的擴充功能,可以生成 MediaItem 的 DataUrl。
如果你在使用 Headless WordPress 和 NextJS,你可能會發現 NextJS 預設並不像 GatsbyJS 那樣提供 BlurUp 圖像。你必須傳入一個 base64 的 dataUrl 才能讓它正常運作。
否則,直到圖像加載完畢之前,你將看到一個空白的空間。這個外掛添加了每個媒體項目的 dataUrl,這樣你就可以使用它作為預留位置,直到圖像完全加載,NextJS 也會創建像 GatsbyJS 一樣的淡入/淡出效果。
返回 DataUrl:
MediaItem
外掛標籤
開發者團隊
② 後台搜尋「Generate WpGraphql Image DataUrl」→ 直接安裝(推薦)
原文外掛簡介
This plugin Generates DataUrl of MediaItem in WPGraphQL.
This is an extension to the awsome WPGraphQL plugin (https://github.com/wp-graphql/wp-graphql) that Generate DataUrl of MediaItems.
If you are working with Headless WordPress and NextJS you can notice that NextJS don’t offer BlurUp image like GatsbyJS by default. You have to pass a base64 dataUrl in to make it work.
Or you will see a blank space until the image loads. This plugin adds a dataUrl on each media item so you can use it as a placeholder until the image fully loads and NextJS will also create the fade/BlurUp Effect like in GatsbyJS.
Returning DataUrl for:
MediaItem
