」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何在程式碼中使用 Unsplash 圖片

如何在程式碼中使用 Unsplash 圖片

發佈於2024-11-02
瀏覽:224

身為從事新 SaaS 專案的開發人員,我需要直接透過 URL 連結一些 Unsplash 圖片。
最初,我看到一篇推薦使用 https://source.unsplash.com/ API 的文章(連結)。但是,此方法不再有效,僅從 URL 欄位複製連結並不能提供嵌入所需的直接圖像 URL。

https://unsplash.com/photos/a-digital-illustration-of-the-letter-k-CnbzJXw5Hx4
How to use Unsplash Images in your code

Unsplash 圖像 URL

我嘗試的下一個選項是透過右鍵單擊圖像 URL 來複製它。然而,這個URL充滿了我不需要的不必要的參數,每次都需要手動刪除。例如:

https://images.unsplash.com/photo-1725610588086-b9e38da987f7?q=80&w=3500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA==

身為一個重視效率的懶惰開發人員,我發現這個過程令人沮喪。我不想每次想要使用圖像時都手動清理 URL。

靈光一現:建立我的第一個 Chrome 擴充

因此,在浪費了太多時間手動執行此操作之後,我做了任何厭惡重複任務的懶惰開發人員都會做的事情 - 我構建了一個 Chrome 擴展。隆重介紹“CopySplash”,一款您以前不知道需要但現在卻離不開的 Chrome 擴充功能!

最好的部分是什麼?這是一個開源專案! (GitHub) 請隨意深入研究程式碼、貢獻、建議功能,甚至只是告訴我你有多喜歡它。讚美總是值得讚賞的。

「CopySplash」有什麼作用?

  • 在 Unsplash 圖像上提供了方便的「複製連結」按鈕疊加,讓用戶只需單擊即可快速將圖像 URL 複製到剪貼簿。

How to use Unsplash Images in your code

  • 設定自訂參數來調整尺寸、品質、裁剪等,根據您的特定需求量身定制並保存它們。

How to use Unsplash Images in your code

但等等…Unsplash 和 Imgix 有什麼關係?

Unsplash 使用 Imgix 渲染 API(連結),這是一種功能強大的圖像處理服務,可動態調整圖像大小、裁剪和優化圖像以進行 Web 交付。 Unsplash 中的每個圖像 URL 均透過 Imgix 進行處理,這就是為什麼 URL 中經常填充參數的原因。

檢視渲染 API 文件以設定將整合到複製的 URL 中的自訂設定

結論:不再有 Unsplash URL 戲劇!

如果您是經常使用 Unsplash 影像的開發人員,「CopySplash」可以為您節省大量時間和精力。嘗試一下,無論您有新功能的想法、想要改進程式碼或幫助編寫文檔,我們都歡迎您提出意見!

連結:

  • CopySplash 擴充
  • 複製Splash程式碼
  • Imgix
  • Unsplash
版本聲明 本文轉載於:https://dev.to/dalisys/how-to-use-unsplash-images-in-your-code-4me8?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 極簡設計初學者指南
    極簡設計初學者指南
    我一直是乾淨和簡單的倡導者——這是我的思維最清晰的方式。然而,就像生活中的大多數任務一樣,不同的工作有不同的工具,設計也是如此。在這篇文章中,我將分享我發現的極簡設計實踐,這些實踐有助於創建乾淨簡單的網站、模板和圖形——在有限的空間內傳達必要的內容。 簡單可能比複雜更難:你必須努力讓你的思維清晰,...
    程式設計 發佈於2024-11-03
  • 了解 React 應用程式中的渲染和重新渲染:它們如何運作以及如何優化它們
    了解 React 應用程式中的渲染和重新渲染:它們如何運作以及如何優化它們
    当我们在 React 中创建应用程序时,我们经常会遇到术语渲染和重新渲染组件。虽然乍一看这似乎很简单,但当涉及不同的状态管理系统(如 useState、Redux)或当我们插入生命周期钩子(如 useEffect)时,事情会变得有趣。如果您希望您的应用程序快速高效,那么了解这些流程是关键。 ...
    程式設計 發佈於2024-11-03
  • 如何在 Node.js 中將 JSON 檔案讀入伺服器記憶體?
    如何在 Node.js 中將 JSON 檔案讀入伺服器記憶體?
    在Node.js 中將JSON 檔案讀入伺服器記憶體為了增強伺服器端程式碼效能,您可能需要讀取JSON 對象從文件到記憶體以便快速存取。以下是在Node.js 中實現此目的的方法:同步方法:對於同步檔案讀取,請利用fs(檔案系統)中的readFileSync () 方法模組。此方法將檔案內容作為字串...
    程式設計 發佈於2024-11-03
  • 人工智慧可以提供幫助
    人工智慧可以提供幫助
    我剛剛意識到人工智慧對開發人員有很大幫助。它不會很快接管我們的工作,因為它仍然很愚蠢,但是,如果你像我一樣正在學習編程,可以用作一個很好的工具。 我要求 ChatGpt 為我準備 50 個項目來幫助我掌握 JavaScript,它帶來了令人驚嘆的項目,我相信當我完成這些項目時,這些項目將使我成為 ...
    程式設計 發佈於2024-11-03
  • Shadcn UI 套件 - 管理儀表板和網站模板
    Shadcn UI 套件 - 管理儀表板和網站模板
    Shadcn UI 套件是預先設計的多功能儀表板、網站範本和元件的綜合集合。它超越了 Shadcn 的標準產品,為那些不僅僅需要基礎知識的人提供更先進的設計和功能。 獨特的儀表板模板 Shadcn UI Kit 提供了各種精心製作的儀表板模板。目前,有 7 個儀表板模板可用,隨著時...
    程式設計 發佈於2024-11-03
  • 如何使用正規表示式捕獲多行文字區塊?
    如何使用正規表示式捕獲多行文字區塊?
    符合多行文字區塊的正規表示式符合跨多行的文字可能會為正規表示式建構帶來挑戰。考慮以下範例文本:some Varying TEXT DSJFKDAFJKDAFJDSAKFJADSFLKDLAFKDSAF [more of the above, ending with a newline] [yep, ...
    程式設計 發佈於2024-11-03
  • 軟體開發中結構良好的日誌的力量
    軟體開發中結構良好的日誌的力量
    日誌是了解應用程式底層發生的情況的關鍵。 簡單地使用 console.log 列印所有值並不是最有效的日誌記錄方法。日誌的用途不僅僅是顯示數據,它們還可以幫助您診斷問題、追蹤系統行為以及了解與外部 API 或服務的交互作用。在您的應用程式在沒有使用者介面的情況下運行的情況下,例如在系統之間處理和傳...
    程式設計 發佈於2024-11-03
  • 如何在單一命令列命令中執行多行Python語句?
    如何在單一命令列命令中執行多行Python語句?
    在單一命令列指令中執行多行Python語句Python -c 選項允許單行循環執行,但在指令中匯入模組可能會導致語法錯誤。要解決此問題,請考慮以下解決方案:使用Echo 和管道:echo -e "import sys\nfor r in range(10): print 'rob'&quo...
    程式設計 發佈於2024-11-03
  • 尋找數組/列表中的重複元素
    尋找數組/列表中的重複元素
    給定一個整數數組,找到所有重複的元素。 例子: 輸入:[1,2,3,4,3,2,5] 輸出:[2, 3] 暗示: 您可以使用 HashSet 來追蹤您已經看到的元素。如果某個元素已在集合中,則它是重複的。為了保留順序,請使用 LinkedHashSet 來儲存重複項。 使用 HashSet 的 ...
    程式設計 發佈於2024-11-03
  • JavaScript 回呼何時異步?
    JavaScript 回呼何時異步?
    JavaScript 回呼:是否非同步? JavaScript 回呼並非普遍非同步。在某些場景下,例如您提供的 addOne 和 simpleMap 函數的範例,程式碼會同步執行。 瀏覽器中的非同步 JavaScript基於回呼的 AJAX 函數jQuery 中通常是異步的,因為它們涉及 XHR (...
    程式設計 發佈於2024-11-03
  • 以下是根據您提供的文章內容產生的英文問答類標題:

Why does `char` behave differently from integer types in template instantiation when comparing `char`, `signed char`, and `unsigned char`?
    以下是根據您提供的文章內容產生的英文問答類標題: Why does `char` behave differently from integer types in template instantiation when comparing `char`, `signed char`, and `unsigned char`?
    char、signed char 和unsigned char 之間的行為差異下面的程式碼可以成功編譯,但char 的行為與整數類型不同。 cout << getIsTrue< isX<int8>::ikIsX >() << endl; cout ...
    程式設計 發佈於2024-11-03
  • 如何在動態產生的下拉方塊中設定預設選擇?
    如何在動態產生的下拉方塊中設定預設選擇?
    確定下拉框中選定的項目使用 標籤建立下拉清單時,您可以可能會遇到需要將特定選項設定為預設選擇的情況。這在預先填寫表單或允許使用者編輯其設定時特別有用。 在您呈現的場景中, 標籤是使用 PHP 動態產生的,並且您希望根據值儲存在資料庫中。實現此目的的方法如下:設定選定的屬性要在下拉方塊中設定選定的項目...
    程式設計 發佈於2024-11-03
  • Tailwind CSS:自訂配置
    Tailwind CSS:自訂配置
    介紹 Tailwind CSS 是一種流行的開源 CSS 框架,近年來在 Web 開發人員中廣受歡迎。它提供了一種獨特的可自訂方法來創建美觀且現代的用戶介面。 Tailwind CSS 有別於其他 CSS 框架的關鍵功能之一是它的可定製配置。在這篇文章中,我們將討論 Tailwin...
    程式設計 發佈於2024-11-03
  • 使用 jQuery
    使用 jQuery
    什麼是 jQuery? jQuery 是一個快速的 Javascript 函式庫,其功能齊全,旨在簡化 HTML 文件遍歷、操作、事件處理和動畫等任務。 「少寫多做」 MDN 狀態: jQuery使得編寫多行程式碼和tsk變得更加簡潔,甚至一行程式碼.. 使用 jQuery 處理事件 jQuery...
    程式設計 發佈於2024-11-03
  • CONCAT() 如何增強 MySQL 搜尋功能以實現完整名稱匹配?
    CONCAT() 如何增強 MySQL 搜尋功能以實現完整名稱匹配?
    WHERE 子句中使用 MySQL CONCAT() 函數進行高效搜尋一個常見的資料庫操作是跨多列搜尋資料。然而,當分別使用名字和姓氏欄位搜尋姓名時,可能會存在一些限制,例如捕獲不完整的匹配。 為了克服這個問題,可以使用 MySQL CONCAT() 函數將列組合成一個用於搜尋的單一欄位。這提供了更...
    程式設計 發佈於2024-11-03

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3