Question

在这里使用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版本上也不会发生。有人有什么想法吗？

在特定图像上忽略了VueJS Instafeed模板

0 个答案: