时间戳

首页 > 解决方案 > 我在使用 setProperty() 为 background-image url 设置 CSS 变量时遇到问题

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

问题描述

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

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

所以我想我会给 CSS 变量一个镜头，并用 javascript 更改图像 url。我能够得到一些有用的东西background-color，但不是background-image我真正想要改变的东西。

我可以为背景图像和背景颜色设置 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.png smiley2.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]})`)

我仍然想对它进行一些重构，这样我就不必创建数组了，但我认为这几乎可以解决我的问题。感谢大家帮助我。

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

这是滑块

标签： javascriptcssreactjs

解决方案

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

导入您的图像，如下所示，并使用变量src

此处的文档添加图像、字体和文件

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]})`);

推荐阅读