Vue JS Hooper Image Carousel 问题（在 NuxtJS 项目中使用）答案

【问题标题】：Vue JS Hooper Image Carousel Issue (using in NuxtJS project)Vue JS Hooper Image Carousel 问题（在 NuxtJS 项目中使用）
【发布时间】：2021-03-07 05:23:16
【问题描述】：

加载问题

我安装这个 (https://baianat.github.io/hooper/) Github 项目来制作图像轮播。

我第二次刷新浏览器后，轮播就可以正常工作了。当项目第一次在浏览器上显示时，轮播图像不会显示。它只是第一次显示加载器动画图像。刷新页面后，轮播启动正常工作。

截图： https://prnt.sc/tc212d

进口：

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]

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

我知道是 8 个月后，但也许它可以帮助这里的人。所以就我而言，这是 img url 的问题，因为我使用的是动态 url，所以我用 require 解决了它；

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

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

【讨论】：