如何在代码中使用 Unsplash 图片
发布于2024-11-02
浏览：194
作为一名从事新 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（）函数要求iv参...编程 发布于2025-05-19 -
在C#中如何高效重复字符串字符用于缩进？在基于项目的深度下固定字符串时，重复一个字符串以进行凹痕，很方便有效地有一种有效的方法来返回字符串重复指定的次数的字符串。使用指定的次数。 constructor 这将返回字符串“ -----”。 字符串凹痕= new String（' - '，depth）; console.Wr...编程 发布于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主函数中，使用了动态分配变量（H...编程 发布于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
