vue.js 是否可以更改swipe.js svg箭头图像？

jc3wubiy 于 2023-01-05 发布在 Vue.js

关注(0)|答案(2)|浏览(118)

我正在尝试将swipe.js箭头按钮图像更改为另一个svg图像。我在swiper.scss文件中找到了svg的实际路径

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  left: 10px;
  right: auto;
}

但当我重写路径时它并没有改变，有什么想法吗？

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: url("@/assets/svg/arrow.svg");

}

vue.js

来源：https://stackoverflow.com/questions/53338209/is-that-possible-to-change-swipe-js-svg-arrow-images

2条答案

按热度按时间

toe950271#

这个解决方案在我的情况下工作（swiper@8），但它不是svg而是png（但它应该与svg一起工作）：

.swiper {
    .swiper-button-prev, .swiper-button-next {
        background-repeat: no-repeat;
        &:after {
            content:'';
        }
    }
    .swiper-button-prev {
        background-image: url(../images/arrow-left.png);    
    }
    .swiper-button-next {
        background-image: url(../images/arrow-right.png);
    }
}

赞(0）回复(0）举报 2023-01-05

mzmfm0qo2#

也许，你应该在css规则声明中使用！important。

赞(0）回复(0）举报 2023-01-05