Nuxt App 的 Vue-CoolLightBox 组件中未显示图像

2024-04-30 • 问答

我编写这段代码是为了在我的 Nuxt 应用程序中使用 Vue-CoolLightBox。我使用 npm install --save vue-cool-lightbox

在我的 Nuxt 应用程序中安装了它

<template>
  <div>
    <CoolLightBox 
      :items="items" 
      :index="index"
      @close="index = null">
    </CoolLightBox>

    <div class="images-wrapper">
      <div
        class="image"
        v-for="(image,imageIndex) in items"
        :key="imageIndex"
        @click="index = imageIndex"
        :style="{ backgroundImage: 'url(' + image + ')' }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg','https://static.toiimg.com/photo/72975551.cms',],index: null
    };
  },};
</script>

问题是图像没有加载到页面中或者图像数组没有与组件项绑定。这里有什么问题？

我认为您没有在 Vue 实例中导入组件。

<script>
import CoolLightBox from 'vue-cool-lightbox'

export default {
  components: {
    CoolLightBox
  },data() {
    return {
      images: [
        'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg','https://static.toiimg.com/photo/72975551.cms',],index: null
    };
  },};
</script>

这段代码有效吗？

编辑：刚刚更新了链接，对不起，即使它已经在工作，我也搞砸了，想删除无用的文件。

以下是您尝试执行的操作的有效示例：https://codesandbox.io/s/nuxt-vue-cool-lightbox-working-roc36?file=/pages/index.vue

它缺少一些指向 images 而不是 items 的链接和一些 CSS。至少，如果您按照 official repo documentation 中的说明导入了其他所有内容。

这里是重要的代码

<CoolLightBox :items="images" :index="index" @close="index = null">
</CoolLightBox>

<div class="images-wrapper">
  <div
    class="image"
    v-for="(image,imageIndex) in images"
    :key="imageIndex"
    @click="index = imageIndex"
    :style="{ backgroundImage: `url(${image})` }"
  ></div>
</div>

Nuxt App 的 Vue-CoolLightBox 组件中未显示图像

zuijian168 回答：Nuxt App 的 Vue-CoolLightBox 组件中未显示图像

大家都在问