如何在Vue中动态呈现字符串?

时间:2019-03-19 08:13:05

标签: vue.js nuxt.js photoswipe netlify-cms

我正在从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 :(得分:0)

根据您的输出,如果value.attributes.imgSrc呈现类似src="/assets/uploads/image.jpg"的相对路径,请尝试使用此路径。

我假设您的“资产”和“组件”文件夹位于“ 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道具的每个项目都需要wh属性。