Не удалось загрузить локальные изображения из JSON в Vue - PullRequest
Новая
       29

Не удалось загрузить локальные изображения из JSON в Vue

1 голос
/ 10 октября 2019

это довольно просто. В моем приложении Vue я использую пролистывание изображения, чтобы установить содержимое в галерее. 

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

, и я хочу получить все различные элементы из массива в другом файле. В теге script я получаю массив с: 

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

, но я хочу держать их отдельно, чтобы не загромождать мой код и иметь код как можно более простым. Нужно ли загружать внешние пакеты, кодировать конкретный метод или изменять формат файла?

...