我在使用 setProperty() 为 background-image url 设置 CSS 变量时遇到问题

Question

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

我尝试使用 CSS 类来做到这一点，方法是更改​​特定值的类，并为每个类分配一个来自本地图像文件夹的图像。这很好用，但我必须为我有图像的每个值创建一个类。如果您只有几张图片可以使用，这没什么大不了的，但我希望可以选择添加更多图片。

所以我想我会试一试 CSS 变量并使用 javascript 更改图像 url。我能够为background-color 找到一些有用的东西，但不适用于background-image，这是我真正想要改变的。

我可以为 background-image 和 background-color 设置 CSS 变量...

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

...并在此处设置背景图像和背景颜色

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')

我尝试了很多不同的变体，在 URL 的各种不同位置使用引号。我已经尝试了许多 jQuery 和连接选项，但真的很成功。

我不明白为什么它适用于背景颜色，但不适用于背景图像。

我应该注意到图像文件夹中有五个图像，唯一的区别是名称中的数字smiley1.pngsmiley2.png 等。我已经两次和三次检查了所有路径。四重检查可能是合适的，但我不这么认为。

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

更新

我能够取得一点进步，但对我来说仍然没有多大意义。

我记录了我设置的初始网址

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

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

Sooo，我尝试像这样将这一行添加到我的 javascript 中

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

它成功了！虽然，这并不是一个很好的解决方案，因为现在我必须完整地输入每个 url。

我希望以类似的方式命名所有图像，但数字值除外，并根据值进行更改。像这样的。

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

更新2

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

const number = Math.round(event.target.value)

    const smileys = ['', smiley1, smiley2, smiley3, smiley4, smiley5]

    document.documentElement.style.setProperty('--background-image', `url(${smileys[number]})`)

我仍然想稍微重构一下，这样我就不必创建数组了，但我认为这几乎解决了我的问题。感谢大家帮助我。

这个Link 关于添加图像、字体和文件肯定很有帮助。

Here is the slider

Answer 1

构建后相对路径不起作用。

像下面这样导入你的图片，并使用src的变量

这里有文档Adding Images, Fonts, and Files

import smiley1 from './Smileys/smiley1.png`;
import smiley2 from './Smileys/smiley2.png`;
import smiley3 from './Smileys/smiley3.png`;
import smiley4 from './Smileys/smiley4.png`;

document.documentElement.style.setProperty(`--background-image`, `url(${smiley1})`);

如果你想通过索引访问它们，你总是可以把它们放在一个数组中：

const smileys = [smiley1, smiley2, smiley3, smiley4];
document.documentElement.style.setProperty(`--background-image`, `url(${smileys[0]})`);