CSS属性background image不起作用,但如果在style=“background image:url(…)”中使用,则会起作用

我有一个Bootstrap 4幻灯片放映,我需要使用以下属性为每张幻灯片设置图像:

    background-image: url('https://res.cloudinary.com/XXX')

下面是我的代码,然后我将解释什么是奇怪的:

<div id="home-showcase-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item slide-show-image-1 active"></div>
        <div class="carousel-item slide-show-image-2"></div>
        <div class="carousel-item slide-show-image-3"></div>
    </div>
</div>

这些是css属性:

.slide-show-image-1 {
    background-image: url('https://res.cloudinary.com/XXX')
}

对于所有3个图像,以此类推。

上面的代码不起作用。当我使用chrome web开发工具进行检查时,我看到属性背景图像有一条线穿过。

但是!如果我使用 完全相同的属性 和url在 风格 属性,它工作!

<div id="home-showcase-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active" style="background-image: url('https://res.cloudinary.com/XXX')"></div>
        <div class="carousel-item" style="background-image: url('https://res.cloudinary.com/XXX')"></div>
        <div class="carousel-item" style="background-image: url('https://res.cloudinary.com/XXX')"></div>
    </div>
</div>

这怎么可能?我确信URL是正确的(如果我在浏览器中打开它,我会看到图像),我正在复制和粘贴整个属性,这样就不会有拼写错误。