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

Posted 2023-02-22

【中文标题】Nuxt App 的 Vue-CoolLightBox 组件中未显示图像

【英文标题】：Images not showing in Vue-CoolLightBox component in Nuxt App

【发布时间】：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>

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

【参考方案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>