如何在Vue(Nuxt)中将图像用作Vue转盘的导航标签

Question

我正在使用Vue旋转木马(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.

非常感谢您的帮助。谢谢

Answer 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;
}