Failing to load local images from JSON in Vue

Question

this is pretty straightforward. In my Vue app I am using picture-swipe to set my content in a gallery.

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

and I want to fetch all the different elements from an array on a different file. In the script tag I get the array with:

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

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

</script>

and in the JSON file I have my data:

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

I can actually load images from the web but I can't load my local images. I could load them with 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
    }
  ]};

but I want to keep them separated so not to clutter up my code and to have a code as simple as possible. Do I have to download external packages, code a specific method or change file format?