D
D
Devero972020-12-21 20:41:30
Node.js
Devero97, 2020-12-21 20:41:30

How to display an array of images in an array (+backend)?

I sit here and think about how to solve the problem. I have a dynamic page that displays text, the title of the page, and the list itself, consisting of several items. The last 2 points differ from the others in that they should display pictures instead of text in an array. Here are the points themselves:

<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>

I make a request for a back, I get data from which, I take an array of the list and run it through a loop. I receive an array with objects inside. And this array is like this:
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: // Массив с картинками (названиями)
        }
      ],
}


There is no problem to output, inside the loop I check which of the item has the images property, then I display a list of pictures, and this is for the last two items. It seems to be buzzing, but the problem is more in the data processing itself and the correct loading.

I created an admin panel in which I fill in the fields like the array itself with objects and then save it to the database and subsequently bring it to the front into the dynamic page itself.
But in the admin panel there are big questions:
1. I display that array with the list in the admin panel and fill it through v-modal. Everything works, empty fields are filled and saved. But the main question is, how do I store pictures in separate arrays?
I have a component that uploads pictures all in one folder. When saving, I return an array with the names of all the pictures. But I need to split them into an array of pictures for one item and an array of pictures for the second item. And have an array of those pictures that you just need to display on the page along with the text.
2. The main thing is that pictures in paragraphs will almost always be reused, so uploading 500 times is not an option. I need to get an array of both new and old pictures, so that later I can go through them in the front and display them. That is, I have to load the names of the pictures from the server by reading the pictures themselves from the folder, and then adding them to the array when clicked.
The idea is that in the admin panel, when filling in the items, I could choose the names of the pictures that would be saved to the array, but if some picture was missing, I could upload it and also add it to this array.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question