element.style.backgroundImage = `url(${url})`;不工作

Question

所有。我遇到了一个关于如何动态更改 div 的背景图像的问题。当我单击下一步按钮时，我想更改背景图像；但是，语法 'disk.style.backgroundImage = "url(xxx)" 不起作用；我该如何解决？下面是对应的代码，希望大家帮我解决一下。

HTML 代码：

<div id="disk" class="player--info__left"></div>

CSS 代码

        .player--info__left{
            position: absolute;
            width: 5.5rem;
            height: 5.5rem;
            border: 1px solid #fff;
            border-radius: 50%;
            padding: 2px;
            top: -1.5rem;
            left: -1.5rem;
            margin: 0 4px 2px 2px;
            background-image: url('/images/IMG_4328.JPG');
            background-size: cover;
            object-fit: cover;
            &:hover{
                transform: rotate(360deg);
                transition: all 1s ease-in-out;
            }
            &::after{
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                border-radius: 50%;
                border: 3px solid rebeccapurple;
            }
        }

JS CODE，这部分我想动态改变背景图片。

const songList = [
    {
        src: '/music/Gymnopédies.mp3',
        img: '/music-img/Gymnopédies.jpg',
        title: 'Gymnopédies',
        singer: 'Erik Satie',
    },
    {
        src: '/music/Old Town Road.mp3',
        img: '/music-img/Lil Nas X.png',
        title: 'Old Town Road',
        singer: 'Lil Nas X',
    },
    {
        src: '/music/Daddy.mp3',
        img: '/music-img/Daddy.png',
        title: 'Daddy',
        singer: 'Coldplay',
    },
];

let index = 0;
next.addEventListener('click', function () {
    ++index;
    if (index >= songList.length - 1) {
        index = 0;
    }
    // isPlaying = true;
    console.log(disk);
    console.log(diskp);
    disk.style.backgroundImage = `url(${songList[index].img})`;

    playSong();
    playerButton.click();
});

Answer 1

这个 sn-p 证明使用按钮单击循环浏览背景图像没有问题。这意味着您的问题不完整，问题出在其他地方。
除非您提供更多详细信息，否则我们将无法回答您的问题。

const imageUrls = [
  "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/220px-FullMoon2010.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/220px-The_Earth_seen_from_Apollo_17.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/OSIRIS_Mars_true_color.jpg/220px-OSIRIS_Mars_true_color.jpg",
];

let index = 0;

function onButtonClick() {
  const disk = document.getElementById("disk");
  disk.style.backgroundImage = `url(${imageUrls[index]})`;
  
  index++;
  if (index >= imageUrls.length)
    index = 0;
}

#disk {
  width: 220px;
  height: 220px;
}

<button onclick="onButtonClick()">Click me repeatedly to cycle through images</button>
<div id="disk" class="player--info__left"></div>