@Devero97

Как вывести массив картинок в массиве(+бекенд)?

Сижу вот и думаю как можно решить вопрос. У меня есть динамическая страница, на которой выводится текст, название страницы, и собственно список, состоящий из нескольких пунктов. 2 последних пункта отличаются от других тем, что у них вместо текста массивом должны выводиться картинки. Вот собственно сами пункты:
<div class="specifications">
        <div class="specifications_desc">
          <div class="specifications_desc_item">
            <div class="specifications_desc_item_title">Срок</div>
            <div class="specifications_desc_item_desc">от 15 до 126 дней</div>
          </div>
          <div class="specifications_desc_item">
            <div class="specifications_desc_item_title">Возраст</div>
            <div class="specifications_desc_item_desc">от 20 до 70 дней</div>
          </div>
          <div class="specifications_desc_item">
            <div class="specifications_desc_item_title">График работы&#58;</div>
            <div class="specifications_desc_item_desc">Круглосуточно</div>
          </div>
          //  Вот 2 пункта с картинками
          <div class="specifications_desc_item">
            <div class="specifications_desc_item_title">
              Способ<br />
              выплаты&#58;
            </div>
            <div class="specifications_desc_item_desc">
              <div>
                <img
                  src="~/assets/images/table/deposit-icons/bank.svg"
                  alt="Иконка здания банка"
                />
                <img
                  src="~/assets/images/table/deposit-icons/cart.svg"
                  alt="Иконка карточки"
                />
                <img
                  src="~/assets/images/table/deposit-icons/elpayment.svg"
                  alt="Иконка платежной системы CONTACT "
                />
              </div>
            </div>
          </div>
          <div class="specifications_desc_item">
            <div class="specifications_desc_item_title">
              Способ<br />
              погашения&#58;
            </div>
            <div class="specifications_desc_item_desc">
              <div>
                <img
                  src="~/assets/images/table/deposit-icons/bank.svg"
                  alt="Иконка здания банка"
                />
                <img
                  src="~/assets/images/table/deposit-icons/cart.svg"
                  alt="Дебетовая карточка"
                />
                <img
                  src="~/assets/images/table/deposit-icons/paymentel.svg"
                  alt="Иконка сети терминалов Элекснет"
                />
              </div>
            </div>
          </div>
        </div>

Делаю запрос на бек, получаю данные из которых, беру массив списка и прогоняю через цикл. Сам массив я получаю с объектами внутри. И этот массив состоит вот так:
data() {

      specifications: [
        {
          name: 'Сумма,  руб',
          caption: '',
          placeholder: '1 000 - 50 000'
        },
        {
          name: 'Срок',
          caption: '',
          placeholder: 'от 15 до 165 ддней'
        },
        {
          name: 'Ставка в день',
          caption: '',
          placeholder: '0 %'
        },
        {
          name: 'Документы',
          caption: '',
          placeholder: 'Паспорт'
        },
        {
          name: 'Возраст',
          caption: '',
          placeholder: 'от 18 до 45 лет'
        },
        {
          name: 'Идентификация',
          caption: '',
          placeholder: 'Фото'
        },
        {
          name: 'График работы',
          caption: '',
          placeholder: 'Круглосуточно'
        },
        {
          name: 'Переплата',
          caption: '0 руб'
        },
        {
          name: 'Продление',
          caption: 'Да'
        },
        {
          name: 'Плохая КИ',
          caption: 'Да'
        },
        {
          name: 'Способ выплаты',
          images: // Массив с картинками (названиями)
        },
        {
          name: 'Способ погашения',
          images: // Массив с картинками (названиями)
        }
      ],
}


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

Я создал админку, в которой заполняю поля как и сам массив с объектами и потом сохраняю в базу данных и впоследствии вывожу на фронт в саму динамическую страницу.
Но в админке возникают большие вопросы:
1. Вывожу циклом в админке тот массив со списком и заполняю его через v-modal. Все работает, пусты поля заполняются и сохраняются. Но основной вопрос, как мне сохранить картинки по отдельным массивам?
У меня есть компонент, который загружает картинки все в одну папку. При сохранении я возвращаю массив с именами картинок всех. Но мне нужно разделить их на массив картинок для одного пункта и массив картинок для второго пункта. И иметь массив тех картинок, которые нужно вывести просто на странице вместе с текстом.
2. Главное то, что картинки в пунктах будут почти всегда переиспользоваться, соответственно загружать по 500 раз это не вариант. Мне нужно получать массив как и новых картинок так и старых, чтобы потом во фронте по ним проходиться и выводить. Тоесть я должен подгружать имена картинок из сервера, путем чтения самих картинок из папки, а затем при клике добавлять их в массив.
Задумка такая, что в админке при заполнении пунктов я мог выбирать имена картинок, которые сохранялись бы в массив, но если какой-то картинки не хватает, я мог ее загрузить и тоже добавить в этот массив.
  • Вопрос задан
  • 143 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы