如何在 Vue(Nuxt) 中使用图像作为 Vue 轮播的导航标签？

Posted 2023-02-23

【中文标题】如何在 Vue(Nuxt) 中使用图像作为 Vue 轮播的导航标签？

【英文标题】：How can I use images as navigation labels for Vue carousel in Vue(Nuxt)?

【发布时间】：2020-08-06 17:39:13

【问题描述】：

我正在使用 Vue Carousel(https://github.com/SSENSE/vue-carousel)。我想使用navigationNextLabel 和navigationPrevLabel 作为图像。意思是，我有两张图片，即previous_arrow.png 和next_arrow.png，我想点击它们以滑过这个轮播。

但我不知道如何在:navigationNextLabel 和:navigationPrevLabel 中嵌入图像。这是我目前所拥有的：

<template>
<carousel 
  :per-page="1" 
  :mouse-drag="true" 
  :navigation-enabled="true"
  :navigation-next-label="<div><img src="../assets/next_arrow.png" class="w-12 h-12" /></div>"
  :navigation-previous-label="<div><img src="../assets/previous_arrow.png" class="w-12 h-12"/></div>"
>

<slide> Slide content 1 </slide>
<slide> Slide content 2 </slide>
<slide> Slide content 3 </slide>

</carousel>
</template>

<script lang="ts">
import  Component, Prop, Vue  from 'vue-property-decorator';

@Component
export default class Gallery extends Vue 
  @Prop() 'navigationEnabled'!: string;
  @Prop() 'navigationNextLabel'!: string;
  @Prop() 'navigationPreviousLabel'!: string;

</script>

我得到的错误：'v-bind' directives require an attribute value.

不胜感激。谢谢！

【参考方案1】：

可以使用 CSS 代替标签 html。当然不要忘记隐藏默认按钮 html。

.VueCarousel-navigation-button::before 
   content: "";
   position: absolute;
   top: 8px;
   height: 25px;
   width: 25px;


.VueCarousel-navigation-next::before 
   background: url('../assets/previous_arrow.png');
   right: 6px;


.VueCarousel-navigation-prev::before 
   background: url('../assets/previous_arrow.png');
   left: 6px;

【讨论】：

嗨！感谢您的回答，但我没有看到我的图像出现。正如你提到的，我对默认值做了一个显示。

以上只是示例。您需要检查 css 背景中的图像路径是否正确。请使用 chrome inspect 正常加载图片。