如何在代码中使用 Unsplash 图片
发布于2024-11-02
浏览：953
作为一名从事新 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]删除
最新教程
更多>
-
何时将成功回调函数与 jQuery Ajax 调用分离？从 jQuery Ajax 调用解耦成功回调函数使用 jQuery ajax 从服务器检索数据时，通常的做法是定义成功.ajax() 块中的回调函数。这将回调处理与 AJAX 调用紧密结合在一起，限制了灵活性和可重用性。要在 .ajax() 块之外定义成功回调，通常需要声明一个用于存储返回数据的变量...编程 发布于2024-11-03 -
了解 React 应用程序中的渲染和重新渲染：它们如何工作以及如何优化它们当我们在 React 中创建应用程序时，我们经常会遇到术语渲染和重新渲染组件。虽然乍一看这似乎很简单，但当涉及不同的状态管理系统（如 useState、Redux）或当我们插入生命周期钩子（如 useEffect）时，事情会变得有趣。如果您希望您的应用程序快速高效，那么了解这些流程是关键。 ...编程 发布于2024-11-03
-
如何在 Node.js 中将 JSON 文件读入服务器内存？在 Node.js 中将 JSON 文件读入服务器内存为了增强服务器端代码性能，您可能需要读取 JSON 对象从文件到内存以便快速访问。以下是在 Node.js 中实现此目的的方法：同步方法：对于同步文件读取，请利用 fs（文件系统）中的 readFileSync() 方法模块。此方法将文件内容作为...编程 发布于2024-11-03
-
人工智能可以提供帮助我刚刚意识到人工智能对开发人员有很大帮助。它不会很快接管我们的工作，因为它仍然很愚蠢，但是，如果你像我一样正在学习编程，可以用作一个很好的工具。 我要求 ChatGpt 为我准备 50 个项目来帮助我掌握 JavaScript，它带来了令人惊叹的项目，我相信当我完成这些项目时，这些项目将使我成为 J...编程 发布于2024-11-03
-
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, t...编程 发布于2024-11-03
-
软件开发中结构良好的日志的力量日志是了解应用程序底层发生的情况的关键。 简单地使用 console.log 打印所有值并不是最有效的日志记录方法。日志的用途不仅仅是显示数据，它们还可以帮助您诊断问题、跟踪系统行为以及了解与外部 API 或服务的交互。在您的应用程序在没有用户界面的情况下运行的情况下，例如在系统之间处理和传输数据的...编程 发布于2024-11-03
-
如何在单个命令行命令中执行多行Python语句？在单个命令行命令中执行多行Python语句Python -c 选项允许单行循环执行，但在命令中导入模块可能会导致语法错误。要解决此问题，请考虑以下解决方案：使用 Echo 和管道：echo -e "import sys\nfor r in range(10): print 'rob'&qu...编程 发布于2024-11-03
-
查找数组/列表中的重复元素给定一个整数数组，找到所有重复的元素。 例子： 输入：[1,2,3,4,3,2,5] 输出：[2, 3] 暗示： 您可以使用 HashSet 来跟踪您已经看到的元素。如果某个元素已在集合中，则它是重复的。为了保留顺序，请使用 LinkedHashSet 来存储重复项。 使用 HashSet 的 Ja...编程 发布于2024-11-03
-
JavaScript 回调何时异步？JavaScript 回调：是否异步？JavaScript 回调并非普遍异步。在某些场景下，例如您提供的 addOne 和 simpleMap 函数的示例，代码会同步运行。浏览器中的异步 JavaScript基于回调的 AJAX 函数jQuery 中通常是异步的，因为它们涉及 XHR (XMLHtt...编程 发布于2024-11-03
-
以下是根据您提供的文章内容生成的英文问答类标题： 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; cou...编程 发布于2024-11-03
-
如何在动态生成的下拉框中设置默认选择？确定下拉框中选定的项目使用 标签创建下拉列表时，您可以可能会遇到需要将特定选项设置为默认选择的情况。这在预填写表单或允许用户编辑其设置时特别有用。在您呈现的场景中， 标记是使用 PHP 动态生成的，并且您希望根据值存储在数据库中。实现此目的的方法如下：设置选定的属性要在下拉框中设置选定的项目，您需...编程 发布于2024-11-03
-
Tailwind CSS：自定义配置介绍 Tailwind CSS 是一种流行的开源 CSS 框架，近年来在 Web 开发人员中广受欢迎。它提供了一种独特的可定制方法来创建美观且现代的用户界面。 Tailwind CSS 区别于其他 CSS 框架的关键功能之一是它的可定制配置。在这篇文章中，我们将讨论 Tailwin...编程 发布于2024-11-03
学习中文
- 1 走路用中文怎么说？走路中文发音，走路中文学习
- 2 坐飞机用中文怎么说？坐飞机中文发音，坐飞机中文学习
- 3 坐火车用中文怎么说？坐火车中文发音，坐火车中文学习
- 4 坐车用中文怎么说？坐车中文发音，坐车中文学习
- 5 开车用中文怎么说？开车中文发音，开车中文学习
- 6 游泳用中文怎么说？游泳中文发音，游泳中文学习
- 7 骑自行车用中文怎么说？骑自行车中文发音，骑自行车中文学习
- 8 你好用中文怎么说？你好中文发音，你好中文学习
- 9 谢谢用中文怎么说？谢谢中文发音，谢谢中文学习
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
