javascript - 无法在 Vue 中从 JSON 加载本地图像

Question

这很简单。在我的 Vue 应用程序中，我使用图片滑动在图库中设置我的内容。

  <template>
    <vue-picture-swipe :items="items"></vue-picture-swipe>
  </template>

我想从不同文件的数组中获取所有不同的元素。在脚本标签中，我得到了数组：

<script>
import Photos from '../statics/photos.json'

 export default{
   name:'gallery',
    data (){
    return{
        title:'Gallery',
        items: Photos.content
      };
    },
}

</script>

在 JSON 文件中，我有我的数据：

{
  "content": [
          {
            "id": 1,
            "src":  "https://s3-eu-west-1.amazonaws.com/dailyfoodpubblici/wp-content/uploads/2018/05/spam-carne-680x409.jpg",
            "thumbnail":  "https://s3-eu-west-1.amazonaws.com/dailyfoodpubblici/wp-content/uploads/2018/05/spam-carne-680x409.jpg",
            "w": 600,
            "h": 400, 
            "title": "Will be used for caption"
          },
          {
            "id": 2,
            "src":  "../assets/b7c.gif",
            "thumbnail":  "../assets/first.gif",
            "w": 600,
            "h": 600, 
            "title": "Will be used for caption"
          }
    ]
}

我实际上可以从网络加载图像，但我无法加载本地图像。我可以用 require(' ') 加载它们

    items: [{
      src:  require('../assets/b7c.gif'),
      thumbnail:  require('../assets/b7c.gif'),
      w: 600,
      h: 400,
      alt: 'some numbers on a grey background' // optional alt attribute for thumbnail image
    },
    {
      src: 'http://via.placeholder.com/1200x900',
      thumbnail: 'http://via.placeholder.com/64x64',
      w: 1200,
      h: 900
    }
  ]};

但我想让它们分开，以免弄乱我的代码，并使代码尽可能简单。我是否必须下载外部包、编写特定方法或更改文件格式？

标签： javascriptarraysjsonvue.jsphotoswipe