首页 > web前端 > js教程 > 如何在代码中使用 Unsplash 图片

如何在代码中使用 Unsplash 图片

王林
发布: 2024-09-12 10:33:10
原创
612 人浏览过

作为一名开发新 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%3D%3D
登录后复制

作为一个重视效率的懒惰开发人员,我发现这个过程令人沮丧。我不想每次想要使用图像时都手动清理 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 图片的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板