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

我实际上可以从Web加载图像，但不能加载本地图像。我可以用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
    }
  ]};

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

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

0 个答案: