Vue中如何动态渲染字符串？答案

【问题标题】：How to dynamically render strings in Vue?Vue中如何动态渲染字符串？
【发布时间】：2019-03-19 08:13:04
【问题描述】：

我正在从 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">

【问题讨论】：

这是一个看起来很奇怪的模板。它应该看起来更像这样。你确定“items”中有数据吗？如果您只是将 {{ items }} 放入模板中会发生什么？（我确定您已经尝试了所有这些，我只是确保）
抱歉，我正在使用 Pug。我应该说或者只是转换回 HTML。
我不明白你为什么需要md 文件。它们不应该是图像吗？这是你的真实代码吗？
Netlify CMS 将图像字符串存储在 Markdown 文件中。为了清楚起见，我可能会忽略它，但这是工作代码，只是不渲染图像。
DevTools 网络面板显示什么？图片 URL 是否有 404s？

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

【解决方案1】：

根据您的输出，如果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 属性。

【讨论】：