Rumah  >  Artikel  >  hujung hadapan web  >  Cara menggunakan Imej Unsplash dalam kod anda

Cara menggunakan Imej Unsplash dalam kod anda

王林
王林asal
2024-09-12 10:33:10557semak imbas

Sebagai pembangun yang mengusahakan projek SaaS baharu, saya perlu memautkan beberapa imej Unsplash terus melalui URL mereka.
Pada mulanya, saya terjumpa artikel (pautan) yang mengesyorkan penggunaan https://source.unsplash.com/ API. Walau bagaimanapun, kaedah ini tidak lagi berfungsi dan hanya menyalin pautan dari medan URL tidak memberikan URL imej langsung yang diperlukan untuk pembenaman.

https://unsplash.com/photos/a-digital-illustration-of-the-letter-k-CnbzJXw5Hx4
How to use Unsplash Images in your code

Unsplash URL Imej

Pilihan seterusnya yang saya cuba ialah menyalin URL imej dengan mengklik kanan padanya. Walau bagaimanapun, URL ini telah diisi dengan parameter yang tidak perlu yang saya tidak perlukan, yang memerlukan pengalihan keluar manual setiap kali. Contohnya:

https://images.unsplash.com/photo-1725610588086-b9e38da987f7?q=80&w=3500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

Sebagai pembangun malas yang mementingkan kecekapan, saya mendapati proses ini mengecewakan. Saya tidak mahu membersihkan URL secara manual setiap kali saya mahu menggunakan imej.

Detik Mentol Cahaya: Membina Sambungan Chrome pertama saya

Jadi, selepas membuang terlalu banyak masa melakukan ini secara manual, saya melakukan perkara yang akan dilakukan oleh mana-mana pembangun yang malas yang tidak mahu melakukan tugasan berulang—saya membina sambungan Chrome. Memperkenalkan "CopySplash", sambungan Chrome yang anda tidak pernah tahu yang anda perlukan tetapi kini tidak boleh hidup tanpanya!

Dan bahagian yang terbaik? Ia adalah projek sumber terbuka! (GitHub) Jangan ragu untuk menyelami kod, menyumbang, mencadangkan ciri, atau beritahu saya betapa anda menyukainya atau tidak?. Pujian sentiasa dihargai.

Apa yang "CopySplash" Lakukan?

  • Menyediakan tindanan butang "Salin Pautan" yang mudah pada imej Unsplash, membolehkan pengguna menyalin URL imej dengan pantas ke papan keratan mereka dengan satu klik.

How to use Unsplash Images in your code

  • Tetapkan parameter tersuai untuk melaraskan saiz, kualiti, pemangkasan dan banyak lagi, disesuaikan dengan keperluan khusus anda dan simpannya.

How to use Unsplash Images in your code

Tetapi Tunggu… Apa Masalahnya dengan Unsplash dan Imgix?

Unsplash menggunakan API pemaparan Imgix (pautan), perkhidmatan pemprosesan imej yang berkuasa yang mengubah saiz, memangkas dan mengoptimumkan imej secara dinamik untuk penghantaran web. Setiap URL imej daripada Unsplash diproses melalui Imgix, itulah sebabnya URL sering diisi dengan parameter.

Lihat dokumentasi API pemaparan untuk menetapkan tetapan tersuai anda yang akan disepadukan dalam URL yang disalin

Kesimpulan: Tiada Lagi Drama URL Unsplash!

Jika anda seorang pembangun yang kerap menggunakan imej Unsplash, "CopySplash" boleh menjimatkan banyak masa dan usaha anda. Cubalah, dan Sama ada anda mempunyai idea untuk ciri baharu, ingin menambah baik kod atau membantu dengan dokumentasi, input anda dialu-alukan!

Pautan:

  • Sambungan CopySplash
  • Kod CopySplash
  • Imgix
  • Nyah percikan

Atas ialah kandungan terperinci Cara menggunakan Imej Unsplash dalam kod anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn