光滑箭头中的背景图像不会出现答案

【问题标题】：Background-image in slick arrow won't appear光滑箭头中的背景图像不会出现
【发布时间】：2019-05-17 15:46:02
【问题描述】：

我正在使用光滑的滑块。我有两张图片：prev.png 和 next.png，但它不起作用。我尝试了其他各种方法，但都不起作用。

我在 Web Inspector 控制台中有此错误消息：

jquery.min.js:2 GET file:///C:/Users/DELL/Desktop/07%20CITEC%20Site/common/js/lightbox/img/next.png net::ERR_FILE_NOT_FOUND

这是结果，箭头只是.slick-next:before 中的>。没事我会删的。

图像箭头

.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.slick-prev
{
    left: 30px;
    width:71px;
    height:43px;
    z-index: 100;
    background: url(common/js/lightbox/img/prev.png) no-repeat center;
    background-size:71px 45px;
}

[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}

.slick-prev:before
{
    content: '<';
}

[dir='rtl'] .slick-prev:before
{
    content: '>';
}

.slick-next
{
    right: 30px;
    width:71px;
    height:45px;
    z-index: 100;
    background: url(common/js/lightbox/img/next.png) no-repeat center;
    background-size:71px 45px;
}

[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}

.slick-next:before
{
    content: '>';
}

[dir='rtl'] .slick-next:before
{
    content: '<';
}

【问题讨论】：

确定是路径问题，从 url 中删除 ../../，改用 /common/js，我怀疑你有一个包含两个常见 js 文件夹的链接，C:/Users/DELL /Desktop/07%20CITEC%20Site/common/js/common/js/
图片文件的路径是什么，是在C:/Users/DELL/Desktop/07%20CITEC%20Site/common/js/lightbox/img/next.png下吗？我们只是在这里猜测，但一旦你得到正确的网址，它应该是固定的。
右击图片，把图片路径粘贴到这里，就像错误说的，找不到文件
不，我的意思是手动转到计算机上的图像文件夹，右键单击，属性并将网址粘贴到此处，以便我们进行比较
好的，你的文件路径有空格，特殊字符要加引号，背景：url("/common/js/lightbox/img/next.png") no-repeat center;

标签： css slick.js

【解决方案1】：

我假设我的文件 slick-theme.css 与 index.html 一起使用。所以我使用 common/js/lightbox/img/prev.png

但是当我观察我的文件夹时，路径是这样的

所以我尝试在 css 文件夹之外获取图像并使用此 background: url(../img/next.png);

【讨论】：