Шаблон VueJS Instafeed игнорируется на определенных изображениях - PullRequest
Новая
       25

Шаблон VueJS Instafeed игнорируется на определенных изображениях

0 голосов
/ 21 ноября 2018

абсолютный новичок в использовании Vue здесь.Меня попросили преобразовать PHP-сайт в VueJS, и я получил возможность начать изучать JS-фреймворк.Однако - у меня есть одна странная проблема.

Один из моих компонентов Vue - это страница Галереи, которая извлекает миниатюры из учетной записи Instagram.Это делается с помощью «instafeed.js».Это работает очень хорошо, за исключением того, что мой шаблон по какой-то причине не применяется к паре изображений.

Gallery.vue: 

<template>
  <div class="container">
    <div id="instafeed"></div>
  </div>
</template>

<script>
import $ from 'jquery'
import Instafeed from 'instafeed'

var userFeed = new Instafeed({
  get: 'user',
  userId: 'USER-ID',
  accessToken: 'ACCESS-TOKEN',
  limit: 25,
  imageTemplate: '<a href="{{link}}" target="_blank" id="{{id}}"><img src="{{image}}" /></a>',
  onAfter: function () {
    var images = $('#instafeed').find('a')
    $.each(images, function (index, image) {
      var delay = (index * 75) + 'ms'
      $(image).css('-webkit-animation-delay', delay)
      $(image).css('-moz-animation-delay', delay)
      $(image).css('-ms-animation-delay', delay)
      $(image).css('-o-animation-delay', delay)
      $(image).css('animation-delay', delay)
      $(image).addClass('animated flipInX')
    })
  }
})
userFeed.run()

Это будет применять шаблон к каждому изображениювернулся.Вы можете видеть, что у меня есть ограничение в 21 изображение.Каждое изображение будет выглядеть так: 

<a href="INSTAGRAM-POST-LINK" target="_blank" id="ID" class="animated flipInX" style="animation-delay: 0ms;">
    <img src="IMG-LINK-HERE"/>
</a>

Однако по какой-то причине изображения 4, 6, 8 12, 16, 19, 21 загружаются без тега привязки. 

<img src="IMG-LINK-HERE"/>

Я понятия не имею, что может быть причиной этого, и это не происходит в PHP-версии сайта.У кого-нибудь есть идеи?

...