Вставка картинок

  1. Одна картинка
  2. Две картинки рядом (side-by-side)
  3. Массив картинок
  4. Увеличение картинки

В этом разделе описано, как вставить одну картинку, две картинки рядом или массив картинок.

Примечание. Вы можете добавлять медиафайлы со своего сервера, Яндекс Диска или из облачных хранилищ, таких как Яндекс Облако, Google Cloud, Amazon AWS и т.п.

Одна картинка

Чтобы отобразить картинку, вам необходима прямая ссылка на нее и компонент view.image. Вы можете менять высоту, ширину, рамку и другие параметры картинки. Подробнее об этом в описании компонента.

Чтобы вставить картинку, переданную во входных данных, в свойстве url используйте компонент data.input.

Посмотреть пример в песочнице.

Массив картинок

Чтобы получить значение из конкретного элемента массива, укажите в пути его порядковый номер, начиная с нуля.

Например, во входных данных указан массив ссылок на изображения:
{
  "images": [
    "https://cdn.stocksnap.io/img-thumbs/960w/surfer-wave_3DBOYBPB3X.jpg",
    "https://cdn.stocksnap.io/img-thumbs/960w/fisherman-silhouette_UADULRRHEK.jpg",
    "https://cdn.stocksnap.io/img-thumbs/960w/old-photo_GEQ27OWZVV.jpg"
  ]
}
Сослаться на конкретный элемент массива можно так:
"url": {
  "type": "data.input",
  "path": "images.<Номер элемента, начиная с нуля>"
}

Посмотреть пример в песочнице.

Компоненты для отображения группы картинок

Чтобы отобразить несколько картинок, вам необходим компонент, в который можно добавить свои изображения. Для этого могут подойти компоненты, реализующие список или таблицу:

  • view.list — позволяет сделать список любых элементов, в том числе картинок. Подходит, если надо сделать вертикальный список.

    Посмотреть пример в песочнице.

    При горизонтальном режиме (надо добавить "direction": true) картинки будут маленькие, т.к. они будут ограничены по высоте и ширине. Увеличить ширину картинки можно, задав минимальную ширину в свойстве minWidth.

    Посмотреть пример в песочнице.

  • layout.columns — этот компонент подходит для отображения небольшого количества картинок в горизонтальном режиме. В нем можно выровнять содержимое по вертикали, например, расположить картинки по центру.

    Посмотреть пример в песочнице.

Примечание. Если вы создаете интерфейс заданий в Толоке, то здесь речь идет про одно задание и отображение в нем больше одной картинки. Подумайте, надо ли вам отображать несколько картинок в одном задании? Если нет, то для вставки картинки вам достаточно компонента view.image.

Если количество картинок неизвестно или их много

Если величина массива с картинками заранее неизвестна или картинок так много, что код слишком объемный, используйте один из компонентов, описанных выше, а в свойство items добавьте компонент helper.transform. Этот компонент позволит вам преобразовать массив ссылок в массив компонентов view.image, чтобы отобразить их в интерфейсе.

Посмотреть пример в песочнице.

Увеличение картинки

Чтобы увеличить картинку по нажатию горячей клавиши, используйте компонент plugin.hotkeys. Укажите в нем, какая клавиша вызывает действие action.open-close. Картинка указывается в свойстве view с помощью конструкции $ref. Действие вызовется при нажатии на выбранную клавишу.

Посмотреть пример в песочнице.