«
»
GoogleGoogle DriveWEBWordPress

Google Drive – Вставляем прямую ссылку на изображение, для использования на сайте

Если Вам как и мне понадобилось вставить изображение на сайт из Google Drive Вы скорее всего столкнетесь с тем что просто так его просто на просто не вставить, и конечно же без определенных танцев с WEB бубном здесь не обойтись. Для реализации вставки изображения расположенного в хранилище Google Drive Вам необходимо данное изображение в начале опубликовать, затем воспользоваться интересной хитростью, а именно Вам необходимо подставить ID изображения к специальной ссылке.

Теперь немного по порядку.

Захват ID изображения

Захват ID изображения

ID изображения находится в конце ссылки, в моме примере я его отметил красным квадратом:

Google Drive - как вставить ссылку на изображение в гугл драйв

Вставка ID в специальную ссылку

Вставка ID в специальную ссылку

Данный идентификатор нужно вставить в конец ссылки данного формата:

https://drive.google.com/uc?export=view&id=ВОТ_ЗДЕСЬ_ID

В моем примере ссылка на изображение которое физически расположено в Google Drive будет выглядеть так:

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

Пример того как вставить изображение с Google Drive на сайт (в CodePen)

Пример того как вставить изображение с Google Drive на сайт (в CodePen)

Готовый и работающий пример отображения вставленной ссылки в атрибут src.

!@<iframe height=”265″ style=”width: 100%;” scrolling=”no” title=”TechBlogSD – Вставляем изображение Google Drive в качестве источника для SRC ссылки” src=”https://codepen.io/dydaevskiy/embed/jXrvQZ?height=265&theme-id=light&default-tab=html,result” frameborder=”no” allowtransparency=”true” allowfullscreen=”true”>
See the Pen <a href=’https://codepen.io/dydaevskiy/pen/jXrvQZ’>TechBlogSD – Вставляем изображение Google Drive в качестве источника для SRC ссылки</a> by sergey
(<a href=’https://codepen.io/dydaevskiy’>@dydaevskiy</a>) on <a href=’https://codepen.io’>CodePen</a>.
</iframe>!@

Связанные записи
ElementorWordPressПлагиныПолезные сайты

Elementor - 10 потрясающих мест для поиска бесплатных или премиальных шаблонов

Chrome DevToolsGoogleGoogle ChromeWEB

Запускайте фрагменты JavaScript на любой странице с помощью Chrome DevTools

MailChimpWordPressПлагины

5 лучших плагинов WordPress для Mailchimp (большинство из них бесплатны)

WoocommerceWordPressПлагины

Дропшиппинг: Как импортировать продукты AliExpress в WooCommerce при помощи плагина DropshipMe