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

【问题标题】：Images not showing in Vue-CoolLightBox component in Nuxt AppNuxt App 的 Vue-CoolLightBox 组件中未显示图像
【发布时间】：2021-05-08 14:20:36
【问题描述】：

我编写这段代码是为了在我的 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>

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

【问题讨论】：

标签： node.js vue.js vue-component nuxt.js lightbox

【解决方案1】：

我认为您没有在 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>

这段代码有效吗？

【讨论】：

【解决方案2】：

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

这是一个关于您正在尝试做的工作示例：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>

【讨论】：