Javascript Vue JS Hooper图像转盘问题（用于NuxtJS项目）

加载问题

  <hooper
    :transition="1000"
    :wheelControl="false"
    :infiniteScroll="true"
    :centerMode="true"
    :hoverPause="true"
    :autoPlay="true"
    :playSpeed="4000"
    :style="variable.HOME_PAGE_SLIDER_LOADED?'height: inherit':'height: 200px'">
    <slide v-for="slider,key in home.index.sliders" :key="key">
      <a :href="typeof slider.link != 'undefined' ? slider.link : ''">
        <img :src="asset(slider.full_size_directory)" height="100%" width="100%">
      </a>
    </slide>
    <SliderNavigation slot="hooper-addons"></SliderNavigation>
  </hooper>

我安装这个（）Github项目来制作一个图像旋转木马

当我第二次刷新浏览器时，Carousel工作正常。当项目在浏览器上运行时，旋转木马图像不会第一次显示。它只是第一次显示加载程序动画图像。一旦我刷新页面，Carousel start就会正常工作

屏幕截图：

导入：

import {Hooper, Slide, Navigation as SliderNavigation} from 'hooper';

Vue文件中的代码

  <hooper
    :transition="1000"
    :wheelControl="false"
    :infiniteScroll="true"
    :centerMode="true"
    :hoverPause="true"
    :autoPlay="true"
    :playSpeed="4000"
    :style="variable.HOME_PAGE_SLIDER_LOADED?'height: inherit':'height: 200px'">
    <slide v-for="slider,key in home.index.sliders" :key="key">
      <a :href="typeof slider.link != 'undefined' ? slider.link : ''">
        <img :src="asset(slider.full_size_directory)" height="100%" width="100%">
      </a>
    </slide>
    <SliderNavigation slot="hooper-addons"></SliderNavigation>
  </hooper>

桌面：操作系统：[Ubuntu 19.02]，浏览器：[chrome、safari、firefox]

智能手机

---

设备：[三星]、浏览器：[chrome]

我知道已经8个月了，但也许它可以帮助这里的人。所以在我的例子中，这是img url的一个问题，因为我使用了一个动态url，我用require解决了这个问题

:src="require(`~/assets/images/${img}`)". 

您应该检查控制台中可能存在的错误。 如果它处于生产模式，您应该检查项目的基本url