Laadisid pildi Google Drive'i, kopeerisid lingi nupust „Jaga" ja kleepisid selle <img src="..."> sisse. Leht näitab katkist ikooni. Tuttav olukord?

Google Drive ei paku pilte otse jagamislingi kaudu. Sa saad Google'i HTML-lehe eelvaatega, mitte faili ennast. Brauser püüab ausalt seda lehte pildina renderdada ja ebaõnnestub. Lahendus on olemas ja see on lihtsam, kui tundub: pead koostama otselingi, sisestades faili ID spetsiaalsesse URL-i. Ei mingeid kolmandate osapoolte teenuseid, puhas Google Drive.

Vaatame kogu protsessi samm-sammult läbi: pildi avalikustamisest kuni töötava sildini sinu saidil.

💡 Kiire ülevaade:

• Ava pildile jagamisõigus Google Drive'is (nupp „Jaga", õiguste tase „Kõik, kellel on link")
• Kopeeri jagamislingist faili ID (pikk sõne pärast d/ ja enne /view)
• Sisesta ID otselingi malli https://drive.google.com/uc?export=view&id=YOUR_ID
• Kleebi valmis link oma saidi HTML-i img sildi src atribuuti

Milleks üldse kasutada Google Drive'i piltide majutamiseks

Google Drive annab igale kontole 15 GB tasuta ruumi. Väikese saidi, testkeskkonna või CodePeni lehe jaoks on see enam kui piisav.

Erinevalt kolmandate osapoolte CDN-idest asuvad pildid sinu kontol ja sul on täielik kontroll ligipääsu üle. Sulge jagamisõigus ja pilt lakkab koheselt kõigil saitidel kuvamast. Ei mingeid väliseid servereid ega registreerumist lisateenustes.

Google'i serveerimiskiirus on püsivalt kõrge. Faile levitatakse sama infrastruktuuri kaudu, mis teenindab YouTube'i ja Google Photosit. Prototüüpide ja isiklike projektide jaoks on see soliidne tasuta CDN.

1. Samm: pildile ligipääsu avamine

Lae pilt Google Drive'i, lohistades faili brauseriaknasse või klõpsates „Uus" → „Faili üleslaadimine".

Pärast üleslaadimist tee failil paremklõps ja vali „Jaga" → „Jaga". Avanevas aknas muuda juurdepääsutase „Piiratud" asemel valikuks „Kõik, kellel on link". Klõpsa „Kopeeri link".

Ilma selle sammuta otsene URL ei tööta. Isegi õigesti koostatud link privaatse faili jaoks tagastab 403 vea. Juurdepääs peab olema avalik.

2. Samm: faili ID eraldamine

Kopeeritud jagamislink näeb välja umbes selline:

1
https://drive.google.com/file/d/1NowYy86nUZVaCMYSXPVI4wiunm4NGU5w/view?usp=sharing

Faili ID on pikk sõne d/ ja /view vahel. Ülaltoodud näites on see 1NowYy86nUZVaCMYSXPVI4wiunm4NGU5w. Vali ja kopeeri see.

Siin on, kuidas ID lingis välja näeb (punasega esile tõstetud):

ID on Google Drive'is iga faili jaoks unikaalne. See ei ole juhuslik sõne, vaid sisemine identifikaator, mida Google kasutab sinu faili leidmiseks oma serverites. Seda ei saa muuta.

3. Samm: otselingi koostamine

Sisesta kopeeritud ID malli:

1
https://drive.google.com/uc?export=view&id=YOUR_ID

Meie näite puhul näeb valmis link välja selline:

1
https://drive.google.com/uc?export=view&id=1NowYy86nUZVaCMYSXPVI4wiunm4NGU5w

Parameeter export=view ütleb Google'ile, et faili serveeritaks nii nagu ta on, ilma HTML-ümbriseta. See ei ole eelvaateleht, vaid puhas pildi baidivoog. Töötab JPEG, PNG, WebP, GIF ja SVG puhul.

Testi linki: kleebi see brauseri aadressiribale. Kui avaneb pilt ise, mitte Google'i leht, on link õigesti koostatud.

Kui vajad pildi asemel faili otsest allalaadimist (näiteks PDF või arhiiv), asenda view sõnaga download:

1
https://drive.google.com/uc?export=download&id=YOUR_ID

Brauser ei ava faili, vaid pakub kohe selle kettale salvestamist.

4. Samm: pildi sisestamine saidile

Sisesta koostatud link <img> sildi src atribuuti:

1
<img
2
  src="https://drive.google.com/uc?export=view&id=1NowYy86nUZVaCMYSXPVI4wiunm4NGU5w"
3
  alt="Image description"
4
  width="800"
5
  height="600"
6
>

Ära unusta alt atribuuti koos sisuka kirjeldusega, see on oluline nii ligipääsetavuse kui ka SEO jaoks.

WordPressi Gutenbergi redaktoris vali plokk „Pilt" → „Sisesta URL-ilt" ja kleebi otselink. Klassikalise redaktori puhul nupp „Lisa meediat" → „Sisesta URL-ilt".

Taustarežiimis (CSS) töötab link täpselt samamoodi:

1
.hero {
2
  background-image: url('https://drive.google.com/uc?export=view&id=YOUR_ID');
3
}

Valmis näide CodePenis

CodePenis saad meetodit testida ilma saiti üles seadmata. Loo uus Pen, sisesta <img> silt eelmise sammu otselingiga ja pilt ilmub eelvaatepaneelile.

Töötab kõigi avalike Google Drive'i piltidega. Muuda Drive'is originaalpilti (sama ID, uus fail) ja värske versioon tõmmatakse saidil automaatselt peale.

Meetodi piirangud

Google Drive'i otselinkidel on liikluslagi. Google ei avalda täpseid numbreid, kuid praktikas võib mõne tuhande vaatamise juures päevas pildi laadimine katkeda. Suure liiklusega tootmissaidi jaoks ei ole see lahendus, kasuta spetsiaalset CDN-i (Cloudinary, Bunny CDN) või objektihoidlat (Amazon S3).

Pilt peab olema avalik. Juurdepääs „Ainult kutsutud" või „Konkreetsed kasutajad" ei aktiveeri otsest URL-i.

Lingi formaat võib muutuda. Google ei garanteeri uc?export=view lõpp-punkti stabiilsust avaliku API-na. Üle 10 aasta kasutuse jooksul pole see katki läinud, kuid formaalselt ei ole meetod väliseks kasutuseks dokumenteeritud. Pikaajaliste projektide jaoks on usaldusväärsem seadistada oma hoidla.

Sellegipoolest on prototüübi, nädalavahetuse maandumislehe, portfooliolehe või Codepeni näite jaoks see meetod täiesti õigustatud. Kiire, tasuta ja ilma registreerumiseta kolmandate osapoolte teenustes.

⁉️🤔 Korduma kippuvad küsimused

Pilt ei lae, kuigi link on õigesti koostatud. Milles viga?

Kontrolli faili juurdepääsutaset Google Drive'is. Isegi õigesti koostatud uc?export=view&id=... link ei tagasta midagi või annab 403 vea, kui fail ei ole avalikult jagatud. Ava juurdepääsuseaded ja veendu, et valitud on „Kõik, kellel on link", mitte „Piiratud juurdepääs". Teine levinud juhtum on see, et fail on Drive'ist kustutatud või prügikasti liigutatud. ID jääb samaks, kuid serveerida pole midagi.

Kas ma saan sama meetodiga lisada SVG-pilte?

Jah, SVG töötab täpselt samamoodi. Google Drive serveerib vektorfailid korrektselt läbi export=view ja brauser kuvab need <img>-s probleemideta. Pea siiski meeles turvalisust: SVG võib sisaldada skripte, seega ära lisa oma saidile kontrollimata kolmandate osapoolte SVG-faile. Enda ikoonide ja illustratsioonide jaoks on meetod täiesti rakendatav.

Kui palju pilte saab ühelt Google'i kontolt serveerida?

Failide arvule ranget piirangut ei ole, kõik sõltub salvestusmahust (15 GB tasuta) ja mitteametlikust liikluslaest. Praktikas töötavad 50-100 pilti isiklikul portfooliosaidi aastaid ilma probleemideta. Suure liiklusega ärisaidi jaoks on parem rentida CDN.

Mis vahe on export=view ja export=download vahel?

export=view serveerib faili sisuna brauseris kuvamiseks, pilt avaneb vahekaardil, video hakkab mängima. export=download sunnib allalaadimist: brauser ei näita faili, vaid salvestab selle kettale. <img src=""> jaoks kasuta view. Nupu „Laadi PDF alla" lingi jaoks kasuta download.

Kas ma saan genereerida erineva suurusega eelvaateid?

Jah, lisa lingile parameeter sz=wNUMBER. Näiteks &sz=w320 piirab pildi laiuse 320 piksliga. Google skaleerib pildi lennult ja sa säästad liiklust saidi mobiiliversiooni jaoks. Täielik mall: https://drive.google.com/uc?export=view&id=YOUR_ID&sz=w320.

Kas Google Drive'i tasub piltide CDN-ina kasutada

Isikliku blogi, lemmikprojekti või kiire prototüübi jaoks jah, see on toimiv ja õigustatud variant. Null kulu, täielik juurdepääsukontroll ja minimaalne vaev.

Saidi jaoks, mille liiklus on paar tuhat inimest päevas, vaata Cloudinaryt selle tasuta mahuga (25 GB liiklust kuus) või Bunny CDN-i sekundipõhise arveldusega. Need maksavad kopikaid ja pildid laadivad stabiilselt igasuguse koormuse all.

Hoia Google Drive'i meetodit oma järjehoidjates hädaolukorra variandina. Kui on vaja kiiresti foorumis ekraanipilti jagada, kliendile kujundust näidata või Codepenis pilt elustada, on see lühim tee faili üleslaadimisest töötava lingini. Ei mingeid registreerimisi, SMS-e ega kvoote.