无法获取图像 URL 并将其用作 CSS 背景图像

Question

我有一个无序列表 wist List Items，它是使用 Fetch 方法创建的。数据是 JSON 数据，需要转发到 HTML 文档

我希望创建的列表项具有基于 JSON 数据 URL 的 CSS 背景。它看起来像这样；

fetch(url).then(function(response){
    return response.json();
    JSON.stringify(data);
}).then(function(data){

    for(var i=0;i<data.length;i++){
        var createListItem = document.createElement("li");
        createListItem.className = "listItem";
        var listItem = document.querySelector(".listItem");

        var createHeaderItem = document.createElement("h3");
        createHeaderItem.innerHTML = data[i].title;

        ul.appendChild(createListItem);
        createListItem.appendChild(createHeaderItem);

        if (data[i] && data[i].media[0] && data[i].media[0].url) {
            listItem.style.backgroundImage = "url('"+""data[i].media[0].url""+"')";

        } else {
            listItem.style.backgroundImage = "none";
    }
}
});

我无法获取列表项样式背景来中继 URL。获取 data.media.url 并将其用作 CSS 列表项属性的正确方法是什么？

Answer 1

看来你的引号太多了

尝试删除第一个 + 之后和第二个 + 之前的引号

  listItem.style.backgroundImage = "url('"+""data[i].media[0].url""+"')";

至

  listItem.style.backgroundImage = "url('"+ data[i].media[0].url +"')";

已编辑：

for(var i=0;i<data.length;i++){
    var createListItem = document.createElement("li");
    createListItem.className = "listItem";

    var createHeaderItem = document.createElement("h3");
    createHeaderItem.innerHTML = data[i].title;

    ul.appendChild(createListItem);
    createListItem.appendChild(createHeaderItem);



    var listItem = document.querySelector(".listItem");


    if (data[i] && data[i].media[0] && data[i].media[0].url) {
        listItem.style.backgroundImage = "url('"+ data[i].media[0].url +"')";

    } else {
        listItem.style.backgroundImage = "none";
}

发生了什么变化？

您从未声明过

    var ul = document.createElement("ul");

我将假设这是全局变量并在此范围之外声明，否则您还有其他问题需要解决。

我已将以下代码（见下文）移到代码的下方。您试图在尚未添加到 DOM 的元素上使用 document.querySelector() 访问 DOM 元素。因此，您总是返回 null。

    var listItem = document.querySelector(".listItem");

我之前提出的这个过分引用仍然有效。

Answer 2

正如我在评论中提到的 listItem 是 null。这是因为 createListItem 尚未添加到 DOM 并且 .querySelector(..) 在调用函数时检查当前 DOM 树。

listItem 不需要存在，因为您正在操作并附加到 createListItem。因此，与其尝试将 .style.backgroundImage = ".." 分配给 listItem，不如将其添加到 createListItem:

if (data[i] && data[i].media[0] && data[i].media[0].url) {
    createListItem.style.backgroundImage = "url('"+data[i].media[0].url+"')";
} else {
    createListItem.style.backgroundImage = "none";
}

此外，如果 .listItem、CSS class 没有某种默认的 background-image，您可以省略上面的 else 子句，因为没必要:

if (data[i] && data[i].media[0] && data[i].media[0].url) {
    createListItem.style.backgroundImage = "url('"+data[i].media[0].url+"')";
}

无法获取图像 URL 并将其用作 CSS 背景图像

Can't fetch image URL and use it as CSS background image

javascript

css

for-loop

background-image

fetch