Passing array of images doesn't render images

[danchristian]

I am pulling an array on images from Netlify CMS and passing that to vue-picture-swipe component, but the acutal images don't render, even though the path is correct etc.

Not sure what I am doing wrong?

Template

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

Script

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

Rendered HTML

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

[beejaz]

@danchristian I believe you must add image dimensions to the array, weight (w:) and height (h:)

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