"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > 코드에서 Unsplash 이미지를 사용하는 방법

코드에서 Unsplash 이미지를 사용하는 방법

2024-11-02에 게시됨
검색:982

새로운 SaaS 프로젝트를 진행하는 개발자로서 저는 일부 Unsplash 이미지를 해당 URL을 통해 직접 연결해야 했습니다.
처음에는 https://source.unsplash.com/ API 사용을 권장하는 기사(링크)를 접했습니다. 그러나 이 방법은 더 이상 작동하지 않으며 단순히 URL 필드에서 링크를 복사하는 것만으로는 삽입에 필요한 직접 이미지 URL이 제공되지 않았습니다.

https://unsplash.com/photos/a-digital-illust-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 확장 프로그램을 만들었습니다. 필요한지 몰랐지만 이제는 없이는 살 수 없는 Chrome 확장 프로그램인 "CopySplash"를 소개합니다!

그리고 가장 좋은 점은 무엇인가요? 오픈 소스 프로젝트입니다! (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(링크)를 사용합니다. Unsplash의 모든 이미지 URL은 Imgix를 통해 처리되므로 URL이 매개변수로 채워지는 경우가 많습니다.

복사된 URL에 통합될 맞춤 설정을 지정하려면 렌더링 API 문서를 확인하세요.

결론: 더 이상 Unsplash URL 드라마는 없습니다!

Unsplash 이미지를 자주 사용하는 개발자라면 "CopySplash"를 사용하면 많은 시간과 노력을 절약할 수 있습니다. 한번 시도해 보시고, 새로운 기능에 대한 아이디어가 있거나, 코드를 개선하고 싶거나, 문서화에 도움이 필요하시다면 여러분의 의견을 환영합니다!

모래밭:

  • CopySplash 확장 프로그램
  • CopySplash 코드
  • Imgix
  • 언스플래시
릴리스 선언문 이 기사는 https://dev.to/dalisys/how-to-use-unsplash-images-in-your-code-4me8?1에서 복제됩니다.1 침해 내용이 있는 경우, [email protected]으로 연락하여 삭제하시기 바랍니다. 그것
최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3