如何在程式碼中使用 Unsplash 圖片
發佈於2024-11-02
瀏覽：452
身為從事新 SaaS 專案的開發人員，我需要直接透過 URL 連結一些 Unsplash 圖片。
最初，我看到一篇推薦使用 https://source.unsplash.com/ API 的文章（連結）。但是，此方法不再有效，僅從 URL 欄位複製連結並不能提供嵌入所需的直接圖像 URL。
https://unsplash.com/photos/a-digital-illustration-of-the-letter-k-CnbzJXw5Hx4
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 複製到剪貼簿。
- 設定自訂參數來調整尺寸、品質、裁剪等，根據您的特定需求量身定制並保存它們。
但等等…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]刪除
最新教學
更多>
-
我可以將加密從McRypt遷移到OpenSSL，並使用OpenSSL遷移MCRYPT加密數據？將我的加密庫從mcrypt升級到openssl 問題：是否可以將我的加密庫從McRypt升級到OpenSSL？如果是這樣，如何？ 答案：是的，可以將您的Encryption庫從McRypt升級到OpenSSL。 可以使用openssl。 附加說明： [openssl_decrypt（）函數要求...程式設計 發佈於2025-05-19 -
在C#中如何高效重複字符串字符用於縮進？在基於項目的深度下固定字符串時，重複一個字符串以進行凹痕，很方便有效地有一種有效的方法來返回字符串重複指定的次數的字符串。使用指定的次數。 constructor 這將返回字符串“ -----”。 字符串凹痕= new String（' - '，depth）; console.W...程式設計 發佈於2025-05-19
-
查找當前執行JavaScript的腳本元素方法如何引用當前執行腳本的腳本元素在某些方案中理解問題在某些方案中，開發人員可能需要將其他腳本動態加載其他腳本。但是，如果Head Element尚未完全渲染，則使用document.getElementsbytagname（'head'）[0] .appendChild（v）的常規方...程式設計 發佈於2025-05-19
-
Go語言垃圾回收如何處理切片內存？Garbage Collection in Go Slices: A Detailed AnalysisIn Go, a slice is a dynamic array that references an underlying array.使用切片時，了解垃圾收集行為至關重要，以避免潛在的內存洩...程式設計 發佈於2025-05-19
-
對象擬合：IE和Edge中的封面失敗，如何修復？To resolve this issue, we employ a clever CSS solution that solves the problem:position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50％）...程式設計 發佈於2025-05-19
-
Python高效去除文本中HTML標籤方法在Python中剝離HTML標籤，以獲取原始的文本表示 僅通過Python的MlStripper 來簡化剝離過程，Python Standard庫提供了一個專門的功能，MLSTREPERE，MLSTREPERIPLE，MLSTREPERE，MLSTREPERIPE，MLSTREPERCE，MLST...程式設計 發佈於2025-05-19
-
您如何在Laravel Blade模板中定義變量？在Laravel Blade模板中使用Elegance 在blade模板中如何分配變量對於存儲以後使用的數據至關重要。在使用“ {{}}”分配變量的同時，它可能並不總是最優雅的解決方案。 幸運的是，Blade通過@php Directive提供了更優雅的方法： $ old_section =...程式設計 發佈於2025-05-19
-
如何限制動態大小的父元素中元素的滾動範圍？在交互式接口中實現垂直滾動元素的CSS高度限制問題：考慮一個佈局，其中我們具有與用戶垂直滾動一起移動的可滾動地圖div，同時與固定的固定sidebar保持一致。但是，地圖的滾動無限期擴展，超過了視口的高度，阻止用戶訪問頁面頁腳。 映射{} 因此。我們不使用jQuery的“ .aimimate...程式設計 發佈於2025-05-19
-
在PHP中如何高效檢測空數組？在PHP 中檢查一個空數組可以通過各種方法在PHP中確定一個空數組。如果需要驗證任何數組元素的存在，則PHP的鬆散鍵入允許對數組本身進行直接評估：一種更嚴格的方法涉及使用count（）函數： if（count（count（$ playerList）=== 0）{ //列表為空。 } 對...程式設計 發佈於2025-05-19
-
在程序退出之前，我需要在C ++中明確刪除堆的堆分配嗎？在C中的顯式刪除 在C中的動態內存分配時，開發人員通常會想知道是否有必要在heap-procal extrable exit exit上進行手動調用“ delete”操作員，但開發人員通常會想知道是否需要手動調用“ delete”操作員。本文深入研究了這個主題。 在C主函數中，使用了動態分配變量（...程式設計 發佈於2025-05-19
-
PHP陣列鍵值異常：了解07和08的好奇情況PHP數組鍵值問題，使用07&08 在給定數月的數組中，鍵值07和08呈現令人困惑的行為時，就會出現一個不尋常的問題。運行print_r（$月）返回意外結果：鍵“ 07”丟失，而鍵“ 08”分配給了9月的值。 此問題源於PHP對領先零的解釋。當一個數字帶有0（例如07或08）的前綴時，PHP將...程式設計 發佈於2025-05-19
-
如何在JavaScript對像中動態設置鍵？在嘗試為JavaScript對象創建動態鍵時，如何使用此Syntax jsObj['key' i] = 'example' 1;不工作。正確的方法採用方括號： jsobj ['key''i] ='example'1; 在JavaScript中，數組是一...程式設計 發佈於2025-05-19
-
如何使用“ JSON”軟件包解析JSON陣列？parsing JSON與JSON軟件包 QUALDALS：考慮以下go代碼：字符串 } func main（）{ datajson：=`[“ 1”，“ 2”，“ 3”]`` arr：= jsontype {} 摘要：= = json.unmarshal（[] byte（...程式設計 發佈於2025-05-19
-
Java中Lambda表達式為何需要“final”或“有效final”變量？Lambda Expressions Require "Final" or "Effectively Final" VariablesThe error message "Variable used in lambda expression shou...程式設計 發佈於2025-05-19
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
