1

我在 VueJS 项目中使用 Glide JS carousel 来显示一些图像（至少 3 个），但是发生的情况是只显示了三个图像中的第一个，而另外两个不显示任何东西，即使<img/>标签具有图像的正确src URL。我已经尝试调试了几个小时，但找不到任何可能导致此错误的东西。

    import Glide from "@glidejs/glide";
import FeatherIcon from "vue-feather";
import "./_style.scss";

export default {
  name: "DashboardCarousel",
  props: {
    imageSources: Array
  },
  mounted() {
    new Glide(".glide").mount();
  },
  render(h) {
    return (
      <div class="glide">
        <div class="glide__track" data-glide-el="track">
          <ul class="glide__slides">
            {this.imageSources.map((source, key) => (
              <li
                key={key}
                class="glide__slide glide__frame glide__image-area"
                class={`glide__slide slide-${key}  glide__image-area`}
              >
                <img
                  onClick={() => window.open(source.link)}
                  src={source.path}
                  style={{ width: "100%", cursor: "default" }}
                />
              </li>
            ))}
          </ul>
        </div>
        <div class="glide__arrows" data-glide-el="controls">
          <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
            <FeatherIcon
              type="chevron-left"
              size={48}
              style={{ opacity: 0.5 }}
            />
          </button>
          <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
            <FeatherIcon
              type="chevron-right"
              size={48}
              style={{ opacity: 0.5 }}
            />
          </button>
        </div>
        <div class="glide__bullets" data-glide-el="controls[nav]">
          {this.imageSources.map((source, index) => (
            <button class="glide__bullet" data-glide-dir={`=${index}`}></button>
          ))}
        </div>
      </div>
    );
  }
};
4

1 回答 1

0

找到的解决方案：我的图像数据是在 glidejs 渲染后加载的。由于 Glide JS 从 props 中获取这些图像，这是静态的，在父组件更新后它不会改变（这是我的理论）。

于 2020-07-30T18:49:16.107 回答