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

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

https://unsplash.com/photos/a-digital-illust-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%3D%3D

효율성을 중시하는 게으른 개발자로서 저는 이 과정이 답답하다고 느꼈습니다. 이미지를 사용할 때마다 URL을 수동으로 정리하고 싶지 않았습니다.

전구 순간: 첫 번째 Chrome 확장 프로그램 구축

그래서 이 작업을 수동으로 수행하는 데 너무 많은 시간을 낭비한 후 반복적인 작업을 싫어하는 게으른 개발자라면 누구나 할 수 있는 작업인 Chrome 확장 프로그램을 만들었습니다. 필요한지 몰랐지만 이제는 없이는 살 수 없는 Chrome 확장 프로그램인 "CopySplash"를 소개합니다!

그리고 가장 좋은 점은 무엇인가요? 오픈 소스 프로젝트입니다! (GitHub) 자유롭게 코드를 살펴보고, 기여하고, 기능을 제안하거나, 얼마나 마음에 드는지 말해 보세요. 칭찬은 언제나 감사드립니다.

"CopySplash"는 무엇을 합니까?

• Unsplash 이미지에 편리한 "링크 복사" 버튼 오버레이를 제공하여 사용자가 한 번의 클릭으로 이미지 URL을 클립보드에 빠르게 복사할 수 있습니다.

• 맞춤 매개변수를 설정하여 특정 요구 사항에 맞게 크기, 품질, 자르기 등을 조정하고 저장하세요.

하지만 잠깐만요… Unsplash와 Imgix의 거래는 무엇입니까?

Unsplash는 웹 전달을 위해 이미지 크기를 동적으로 조정하고 자르고 최적화하는 강력한 이미지 처리 서비스인 Imgix 렌더링 API(링크)를 사용합니다. Unsplash의 모든 이미지 URL은 Imgix를 통해 처리되므로 URL이 매개변수로 채워지는 경우가 많습니다.

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

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

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

링크:

• CopySplash 확장 프로그램
• CopySplash 코드
• 임직스
• 언스플래쉬

위 내용은 코드에서 Unsplash 이미지를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!