Как динамически отображать строки в Vue? - PullRequest
Новая
       22

Как динамически отображать строки в Vue?

1 голос
/ 19 марта 2019

Я извлекаю массив из изображений из Netlify CMS и передаю его компоненту vue-picture-swipe, но точные изображения не отображаются, даже если путь правильный и т. Д.

Не уверен, что я делаю не так?

Шаблон 

vue-picture-swipe(:items="items")

Скрипт 

    <script>
      export default {
        data: function() {
          return {
                    items: []
                };
        },

            created: function () {
                this.imageList()
            },

            methods: {
                imageList: function () {
                  const files = require.context('~/content/gallery/images/', false, /\.md$/);

                    let images = files.keys().map(key => ({
                        ...files(key)
                    }));

                    let items = images.map(function(value) {
                        return {
                            'src': value.attributes.imgSrc,
                            'thumbnail': value.attributes.imgSrc,
                            'alt': value.attributes.imgDesc
                        }
                    });

                    return this.items = items
                }
            }

        };
    </script>

Визуализированный HTML 

<img src="/assets/uploads/image.jpg" alt="Test Image description" itemprop="thumbnail">

1 Ответ

0 голосов
/ 26 марта 2019

Согласно вашему выводу, если value.attributes.imgSrc отображает относительный путь, такой как src="/assets/uploads/image.jpg", попробуйте указать этот путь.

Я предполагаю, что ваши папки "assets" и "components" находятся непосредственно под "src": 

let items = images.map(function(value) {
  return {
    'src': require('..' + value.attributes.imgSrc), // or require('@' + value.attributes.imgSrc)
    'thumbnail': require('..' + value.attributes.imgSrc),
    'alt': value.attributes.imgDesc
  }
})

Обратите внимание, что vue-picture-swipe items реквизитам требуется w и h атрибутов для каждого элемента.

...