问 我在使用setProperty()为背景图像url设置CSS变量时遇到了问题

EN

我正在为一个范围滑块创建一个React组件，其中滑块拇指是一个图像，它在滑动条上的某些值上发生变化。

我试图用CSS类来实现这一点，方法是在特定的值上更改类，并且每个类都从本地图像文件夹中分配一个图像。这很好，但是我必须为我的每个值创建一个类，我有一个图像。如果你只有几张图片可以使用，那就没什么大不了的了，但是我想选择添加更多的图片。

所以我想我应该给CSS变量一次机会，用javascript修改图像url。我能够为 background-color 工作，但不能为 background-image 工作，这正是我真正想要改变的。

我可以为背景图像和背景颜色设置CSS变量.

:root {
  --background-image: url('./Smileys/smiley4.png');
  --background-color: red;
}

...and在这里设置背景图像和背景色。

background-image: var(--background-image);
background-color: var(--background-color);

当第一次加载滑块时，它将设置正确的图像，但当我移动滑块时，图像消失，没有设置新的图像。颜色很好。

这是我试图使用的javascript。

document.documentElement.style.setProperty('--background-image', 'url("./Smileys/smiley2.png")')
document.documentElement.style.setProperty('--background-color', 'green')

我已经尝试了很多不同的变化，在各种不同的地方引用的网址。我已经尝试了许多jQuery和级联选项，但真的被淘汰了。

我不知道为什么它适用于背景颜色，但不是背景图像。

我应该注意到，图像文件夹中有五个图像，唯一的区别是名称 smiley1.png 、 smiley2.png 等中的数字。我已经检查了所有路径。四倍支票可能是合理的，但我不这么认为。

我很感激我能得到的任何帮助。我绝对愿意走一个完全不同的方向，但我从这条路开始，如果可能的话，我想找出一个解决方案。

更新

我取得了一些进步，但这对我来说仍然没有多大意义。

我记录了我设置的初始url

const el = getComputedStyle(document.documentElement)
    .getPropertyValue('--background-image')
    console.log(el)

把这个拿回来..。 url(\/static\/media\/smiley4\.e2025ea6\.png)

所以，我尝试在我的javascript中添加这一行，如下所示

document.documentElement.style.setProperty('--background-image', 'url(\/static\/media\/smiley4\.e2025ea6\.png)')

成功了！！尽管如此，这并不是一个很好的解决方案，因为现在我必须将每个url全部打印出来。

我希望将所有的图像命名为类似的，除了一个数字值，并让它们根据值进行更改。就像这样。

document.documentElement.style.setProperty('--background-image', 'url({`smiley${number}.png`)')

UPDATE2

多亏了 kenput3r ，我最终从图像文件夹导入了图像，然后为图像创建了一个数组。

const number = Math.round(event.target.value)
    const smileys = ['', smiley1, smiley2, smiley3, smiley4, smiley5]
    document.documentElement.style.setProperty('--background-image', `url(${smileys[number]})`)

我仍然希望对其进行重构，这样我就不必创建数组了，但我认为这很大程度上解决了我的问题。感谢大家的帮助。

这个添加图像、字体和文件的 链接 绝对是有帮助的。

这是滑块