Notion 嵌入 imgur網站內的圖並讓該圖顯現

更新於 發佈於 閱讀時間約 5 分鐘
我使用imgur網站上的照片網址 ,以嵌入網址的方式,來實現 在Notion 中 的 Gallery 畫面中 上圖下文 的結果,現在,我把自己遇到的問題,和自己盲測的解決方法提供分享,希望 對於 使用 Gallery 的 圖片嵌入網址 的使用者,能有所幫助。
  • 本事件源自 如何用 Notion 做書櫃按作者八ㄦ力的傻勇者生存遊戲提供的「(Files & media)嵌入書封」 內容,經我實作後,出現一個問題:建立一個 Gallery database後,若在Gallery畫面的卡片內想將 imgur網站上的照片 利用 property / text / file & media 中使用 Embed Link 來嵌入 時,發現 imgur鏈結的圖片(包含Web 網頁鏈結的圖片) 無法顯現出圖片,只會出現一個鏈結位址(),看來,想要出現 上圖下文 的 Gallery,就只能另尋方法。以下是我實驗的兩個解決方法:

  •   方法一,使用Gallery 卡片內的 Add cover ()注意,這個選項必須游標移至卡片標題的最上面時才會看到。
      點擊 Add cover 後出現一張圖片,點搫圖片右下方的 Change cover(圖1),進入後選 link , 然後貼上 Web 網頁鏈結的圖片 (注意:直接複製貼上imgur網站上的圖片鏈結是無效的),最後按 Submit ,這樣就可以看到你所增加的 Cover 圖片。
      完成上述動作後,回到Gallery畫面,這時應該不會看到之前嵌入的cover 圖片, 在這個畫面 ,點選 右上角三個點/properties(步驟1,2)進入 一個選單,點選單中第一個 Card preview ,再勾選 page cover 選項(步驟3,4),經過這些步驟(步驟圖),就可以顯現出上圖下文 的 Gallery()。
      溫馨提醒:page cover 𥚃的圖片使用的 Link 內容必須是 web 上可看到的,這個例子使用的是 博客來的書圖。

  •   方法二,利用 /image 嵌入 imgur網站內的照片鏈結網址並讓該圖自動顯現這個方法,是使用Card preview 𥚃面的 page content (請看上面步驟圖的步驟3),所以進入卡片後,到卡片下半部,先把原來卡片內的 to do 等其他內容刪除。然後 用 /image 嵌入 照片鏈結網圵 (),而這裹 所填 的網址鏈結內容,會決定 Gallery 畫面的 照片會不會顯現。現就填入內容可區分為三種:
      第一種填入內容:單純 copy imgur 網站上的照片鏈結,會導致 Gallery 畫面上的照片顯示失敗
    範例如下
    https://imgur.com/b4Zl7bC
    填入這樣的內容,你可以看到 卡片內會出現 照片,但是該照片的右上角會多出一個 share,所以結果就是 Gallery 畫面上 仍然看不到 照片(
      第二種填入內容:就是將上面第一種填入的照片鏈結,在其後面加上附檔名 例如 .png 或 .jpg加上有附檔名的照片鏈結,你可以看到 卡片內 的照片 會以「龜速」的方式完整呈現,同時,你也可以在 Gallery 畫面上 看到 照片(
      溫馨提醒:這個方法,也同時解決了 我文章一開始提到的「在 property / text / file & media 中使用 Embed Link 來嵌入 照片卻無法 顯現 照片」 的問題()。換句話說,如果 在 property / text / file & media 中嵌入照片鏈結網址後卻只看到 鏈結網址時,你只要在 填入的照片鏈結網址後面加上附檔名.png 或 .jpg 後,就可以看到 嵌入 的照片了()。
      第三種填入內容:就是將上面第二種填入的照片鏈結內容,在其前後分別加上[img] 和 [/img],範例如下(): [img]https://i.imgur.com/dJKDvLa.png[/img]
    這樣的內容填入後,你可以看到 卡片內 的照片 會以「非常迅速」的方式完整呈現,同時,你也可以在 Gallery 畫面上 看到 照片(同上圖) 這也是 當你使用 Card preview 𥚃面的 page content 時,我最推薦的方法。

  • 結論:
  • 使用Gallery 卡片內的 Card preview / Page cover 來顯示 圖片時,嵌入的 imgur網站/照片網址後面要加 .png 或 .jpg 。
  • 使用 Gallery卡片內的 Card preview / Page content 來顯示 圖片時,當配合使用 /image 來嵌入 imgur網站/照片網址,除了 確定該網址後面要加附檔名 .png 或 .jpg 外,一定要在其前後分別加上[img] 和 [/img],如此可以加快 Notion 載入該圖片的速度。
即將進入廣告,捲動後可繼續閱讀
為什麼會看到廣告
avatar-img
4會員
19內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
wendad的沙龍 的其他內容
2021年12月30日,在我的國小同學群組𥚃看到健男兄轉貼分享的貼文,對於退休一族 的我,讀後 也 *萌生同感,予以 分享。並以此向作者致敬。
每個人時間有限,沒必要花時間看這些釣魚標題的文章。
2021年12月30日,在我的國小同學群組𥚃看到健男兄轉貼分享的貼文,對於退休一族 的我,讀後 也 *萌生同感,予以 分享。並以此向作者致敬。
每個人時間有限,沒必要花時間看這些釣魚標題的文章。
你可能也想看
Google News 追蹤
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
近一個月內,Notion 對介面 layout 進行了不少調整,其中有一個改動讓我不太喜歡,就是對 database 多行文字的省略處理。 原本 Notion 會完整展示多行文字,但現在改為使用縮減符號來省略內容,這對我來說非常不方便使用。 ▼ 大概第五行左右,就會自動縮簡內容 ▼ 移除焦點後
Thumbnail
此篇文章介紹如何利用Notion建立法律知識管理系統,有效整理法條、筆記,建立專屬知識團塊,提升學習效率與記憶力。文章並引用「東大博士的考試腦」一書的概念,說明記憶的運作機制,以及如何透過有效的知識組織方法,建構長期記憶,減少搜尋資料的時間,提升工作效率。
Thumbnail
既然用了Notion來加強創作的生產力,當然要多練習快捷鍵,更能節省時間。以下有幾支快捷鍵的教學影片,請享用!
Thumbnail
Notion 資料庫中動態與靜態 ID 的設置方法~
Thumbnail
這篇涵蓋了 Notion 建立網站的基礎,還有免費的教學資源,讓你不用寫程式,就能用 Notion 快速建立個人網站! Notion 簡易入口網站適合學生、求職、接案、小店家使用,能快速產出一個網站,節省成本又快速方便。
Thumbnail
我發現很多人在使用 Notion 的一個煩惱跟痛點是因為自由度太高, 所以很容易找不到建立的頁面隨著新增功能側邊欄越來越長 其實 Notion 根本可以不用手動整理他呀! 你只需要在每個頁面新增一個快速跨頁面自動目錄
Thumbnail
之前分享過 Notion 卡片盒筆記缺乏圖像化流程圖的視覺呈現,雖然我個人較少用到,但是還是收到一些希望能有圖像化顯示的訊息。最近發現一個 Figma 外掛,可以將便利貼牆匯入 Notion 資料庫,或許也能補足圖像化製作流程圖等方面的需求!
Thumbnail
此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
Thumbnail
我在之前提到過「朋」跟「友」的概念略有不同,我自己是以 Notion 資料庫的方式來管理跟我有關聯的「人物」,同時也是系統中的一小部分,接下來我們來看看這個資料庫的使用方法,也順便介紹我的設置方法。
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
近一個月內,Notion 對介面 layout 進行了不少調整,其中有一個改動讓我不太喜歡,就是對 database 多行文字的省略處理。 原本 Notion 會完整展示多行文字,但現在改為使用縮減符號來省略內容,這對我來說非常不方便使用。 ▼ 大概第五行左右,就會自動縮簡內容 ▼ 移除焦點後
Thumbnail
此篇文章介紹如何利用Notion建立法律知識管理系統,有效整理法條、筆記,建立專屬知識團塊,提升學習效率與記憶力。文章並引用「東大博士的考試腦」一書的概念,說明記憶的運作機制,以及如何透過有效的知識組織方法,建構長期記憶,減少搜尋資料的時間,提升工作效率。
Thumbnail
既然用了Notion來加強創作的生產力,當然要多練習快捷鍵,更能節省時間。以下有幾支快捷鍵的教學影片,請享用!
Thumbnail
Notion 資料庫中動態與靜態 ID 的設置方法~
Thumbnail
這篇涵蓋了 Notion 建立網站的基礎,還有免費的教學資源,讓你不用寫程式,就能用 Notion 快速建立個人網站! Notion 簡易入口網站適合學生、求職、接案、小店家使用,能快速產出一個網站,節省成本又快速方便。
Thumbnail
我發現很多人在使用 Notion 的一個煩惱跟痛點是因為自由度太高, 所以很容易找不到建立的頁面隨著新增功能側邊欄越來越長 其實 Notion 根本可以不用手動整理他呀! 你只需要在每個頁面新增一個快速跨頁面自動目錄
Thumbnail
之前分享過 Notion 卡片盒筆記缺乏圖像化流程圖的視覺呈現,雖然我個人較少用到,但是還是收到一些希望能有圖像化顯示的訊息。最近發現一個 Figma 外掛,可以將便利貼牆匯入 Notion 資料庫,或許也能補足圖像化製作流程圖等方面的需求!
Thumbnail
此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
Thumbnail
我在之前提到過「朋」跟「友」的概念略有不同,我自己是以 Notion 資料庫的方式來管理跟我有關聯的「人物」,同時也是系統中的一小部分,接下來我們來看看這個資料庫的使用方法,也順便介紹我的設置方法。