Блог

Я работаю над проектом с использованием Gatsby, Strapi и Cloudinary. Я развертываю интерфейс на Netlify и приложение Strapi на Heroku (с добавлением экземпляра базы данных Postgresql).

Я ищу уже несколько недель, но, похоже, не могу найти способ ленивой загрузки изображений, полученных через Cloudinary.

Я заменил редактор расширенного контента по умолчанию в Strapi на ckeditor, чтобы редакторы могли добавлять фотографии к своему контенту. Они автоматически загружаются и обслуживаются Cloudinary.

Мой вопрос в том, есть ли способ ленивой загрузки изображений, и если да, следует ли это делать при их обслуживании из Cloudinary, должен ли я делать это как промежуточное программное обеспечение Strapi или просто через Gatsby?

Примечание: я не использую изображения нигде во внешнем интерфейсе, поскольку они анализируются как html из Strapi. Все, что я сейчас делаю, это передаю извлеченный контент в div using dangerouslySetInnerHtml .

С dangerouslySetInnerHtml помощью директивы вы вставляете все, что находится внутри вашего форматированного текста, в виде содержимого HTML, поэтому вы теряете контроль над настройкой поведения этого содержимого. Следовательно, он будет отображаться сразу.

Нет встроенного способа сделать это, кроме как путем анализа вашего форматированного текста с помощью сторонней зависимости (которую я не смог найти) / пользовательского метода, который даст вам возможность оборачивать ваши изображения любым пользовательским компонентом. Идея, в любом случае, состоит в том, чтобы проанализировать ваши текстовые блоки для настройки вывода.

Кроме того, проверьте, прилагается ли к тегу images ( <img> ) loading=lazy свойство:

 <img src="image.jpg" alt="..." loading="lazy">