How to dynamically render strings in Vue?

Question

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

That's a weird looking template. It should look more like this. Are you sure you have data in "items"? What happens if you just put {{ items }} in your template? (I'm sure you already tried all this, I'm just making sure) — gijswijs, Mar 25 '19 at 13:49
Sorry, I'm using Pug. I should have said or just converted back to HTML. — Dan, Mar 25 '19 at 16:14
I don't understand why you require `md` files. Are they not supposed to be images? Is this your real code? — Hammerbot, Mar 25 '19 at 16:19
Netlify CMS stores the image strings in Markdown files. I probably could have left that out for clarity but this is the working code, just not rendering the image. — Dan, Mar 25 '19 at 16:25
What does the DevTools network panel show? Are there `404`s for the image URLs? — tony19, Mar 26 '19 at 04:08
nuxt assets not served from assets. Assets supposed to be bundled by webpack into your app. Only static folder served by nuxt into root — Aldarund, Mar 26 '19 at 10:31

score 0 · Answer 1 · answered Mar 26 '19 at 09:31

According to your output, if value.attributes.imgSrc renders a relative path like src="/assets/uploads/image.jpg", try to require this path.

I'm assuming your "assets" and "components" folders are directly under "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
  }
})

Note that vue-picture-swipe items props need w and h attributes for each item.

How to dynamically render strings in Vue?

1 Answers1