無法獲取圖片網址並將其用作CSS背景圖片

Question

我有一個使用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 list-item屬性的正確方法是什么？

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樹時被調用的函數。

因為您要操作並附加到createListItem所以listItem不需要存在。 因此，與其嘗試將.style.backgroundImage = ".."分配給listItem .style.backgroundImage = ".."將其添加到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";
}

此外，如果CSS類.listItem沒有某種默認的background-image ，則可以省略上述else子句，因為它是不必要的：

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