Background url images: url() — CSS: Cascading Style Sheets

Получить изображение

Удаление

Чтобы удалить изображение, см. документацию CMA по активам.

Представление изображений

Когда вы используете Sanity, у вас под рукой есть глобально распределенная CDN активов. В любое время вы можете запросить свое изображение в новом размере, с новым кадрированием или с чем угодно, и актив будет создан для вас и автоматически кэшируется рядом с вашими пользователями. Одна вещь, о которой следует помнить при реализации внешнего интерфейса, заключается в том, что для достижения максимальной производительности вы должны позаботиться о повторном использовании обрезки и размеров во внешнем интерфейсе, чтобы убедиться, что ваши кэшированные активы повторно используются

Прежде чем перейти к практическим деталям, давайте вспомним, как изображения обрабатываются в Sanity: Тип image представляет изображение, используемое в качестве поля в документе или встроенное в текстовый блок. Он может содержать дополнительные поля, такие как подпись, кредитование и т. д., а также конкретную обрезку и точку доступа для этого изображения. Изображение ссылается на актив , который представляет фактические данные изображения, которые должны отображаться для этого изображения. (Один

Абсолютно самый простой способ представить изображения из Sanity — получить базовый URL-адрес изображения из объект. Допустим, у нас есть человек типа документа с изображением поля, мы можем получить базовый URL-адрес с помощью этого простого запроса:

 *[_type == 'person']{
  имя,
  "imageUrl": image.asset->url
} 

Здесь мы следуем по ссылке актив из изображения и извлечь только URL-адрес.

 {
  имя: "Шон Ганн",
 
 imageUrl: "https://cdn.
  sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg" 
 } 

Теперь мы можем добавить параметры URL-адреса к этому базовому URL-адресу, чтобы ограничить размер, обрезать изображение, размывать его или выполнять над ним другие операции. Некоторые примеры:

 // Базовое изображение
https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg
// Размер изменен, чтобы иметь высоту 200
https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?h=200
// Извлекаем прямоугольник из изображения (x, y, ширина, высота)
https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?rect=70,20,120,150
// Извлекаем прямоугольник из изображения (x, y, ширина, высота) и ограничиваем высоту до 64
https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?rect=70,20,120,150&h=64
// Размытие изображения
https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.

  
 jpg?blur=50
 

Небольшие изображения масштабируются до указанной ширины или высоты. Чтобы избежать этого, используйте &fit=max .

Полный список параметров см. в справочной документации по URL-адресу изображения.

Некоторые изображения могут быть обрезаны и иметь горячую точку. Это может быть включено в схеме. Если есть обрезание/горячая точка, это означает, что редактор использовал такой интерфейс:

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

Запись изображения с кадрированием и горячей точкой может выглядеть из API следующим образом:

 {
  _тип: "изображение",
  объект: {
    _ref: "изображение-G3i4emG6B8JnTmGoN0UjgAp8-300x450-jpg",
    _type: "ссылка"
  },
  // Обрезка указывается в долях размера изображения
  // и измеряется от края изображения. Это изображение обрезано
  // снизу на 44% высоты изображения.  Другие измерения
  // остаются нетронутыми.
  обрезать: {
    низ: 0,44,
    слева: 0,
    справа: 0,
    сверху: 0
  },
  // Позиция горячей точки x, y выражается в долях размера изображения.
  // Эта горячая точка расположена по центру на 43% ширины изображения слева,
  // 26% высоты изображения сверху. Ширина и высота есть
  // в той же системе единиц. Эта горячая точка имеет ширину 44% ширины изображения.
  // 65% высоты изображения в высоту, этот прямоугольник центрирован по осям x,y
  // задана координата.
  точка доступа: {
    высота: 0,44,
    ширина: 0,65,
    х: 0,43,
    у: 0,26
  }
} 

Ответственность переднего плана заключается в соблюдении обрезки/горячих точек в соответствии с пожеланиями редактора, но для удобства мы предоставляем библиотеку JavaScript, которая позаботится об этом за вас.

Для проектов JavaScript мы предоставляем пакет @sanity/image-url npm, который будет генерировать URL-адреса изображений для вас с учетом записи изображения, подобной приведенной выше. Вы можете указать дополнительные ограничения, такие как ширина и высота, и быть уверенными, что обрезка/горячая точка соблюдается там, где это применимо.

Давайте посмотрим, как этот пакет можно использовать с React для рендеринга изображений. (В нем нет ничего специфичного для React, вы можете использовать его с любым фреймворком)

Вы устанавливаете его в свой проект обычным способом:

 npm install --save @sanity/image-url
 

Затем вам нужно настроить его с вашим идентификатором проекта и набором данных. Самый простой способ сделать это — инициализировать его с помощью клиента Sanity, который уже есть в вашем проекте. Для этого импортируйте его, используя правильный путь, как показано ниже. В примере у нас есть sanityClient.js в корне нашего проекта, который, как предполагается, возвращает настроенный клиент (в комплекте с projectId , dataset и apiVersion ). Узнайте больше о клиенте в нашей документации по клиенту JavaScript.

 импортировать React из «реагировать»
импортировать клиента из './sanityClient'
импортировать imageUrlBuilder из '@sanity/image-url'
// Получите предварительно настроенный построитель URL-адресов от вашего здравомыслящего клиента
const builder = imageUrlBuilder (клиент)
// Затем мы хотели бы сделать простую функцию, подобную этой, которая дает
// создаем изображение и возвращаем конструктор, чтобы вы могли указать дополнительные
// параметры:
URL-адрес функции (источник) {
  вернуть builder.image(источник)
}
 

Теперь вы можете использовать этот удобный синтаксис конструктора для создания ваших URL-адресов:

Вы можете добавить дополнительные параметры, подобные этому :

Полный список параметров конструктора см. в справочной документации.

Для поддержки загрузки изображения с определенным именем файла во внешнем интерфейсе необходимо добавить параметр запроса dl= к URL-адресу, например.