如何将 backgroundImage 属性设置为 Rest API 中的 URL？

Question

我正在尝试访问 Rest API 以访问其中的图像 URL。 Character.Portrait 有 url 并且打印成功。但是当我尝试改变

document.getElementById('portrait').style.backgroundImage

它returns 一个空字符串。我只想将背景图片设置为 JSON.URL 中的图片。

这也是我在这里的第一个问题，所以如果难以阅读，我深表歉意。

JS-

//Set the URL up. userKey will eventually be provided by a person. Using my own character for testing.//
const url = "https://xivapi.com/character/";
var userKey = "1814929"
var api_url = url + userKey;

console.log(api_url)

//This calls the function below to access the API//
getCharacter();
//This is the function that gets access to the API. //
async function getCharacter() {
    const response = await fetch(api_url);
    const character = await response.json();
//This is where I'm having difficulty. 
//This does *NOT* change the backgroundImage property.
    document.getElementById('portrait').style.backgroundImage = character.Character.Portrait;

    console.log(document.getElementById('portrait').style.backgroundImage);
//This accurately prints the Avatar's URL
    console.log(character.Character.Avatar);
//This accurately prints the Portrait URL. 
    console.log(character.Character.Portrait);

}

HTML

<body>
...
    <main>
        <h1 id="pageTitle">Main</h1>
        <div id="content">
            <div id="character">

                <div id="portrait">
                </div>

            </div>
        </div>

    </main>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="/pages/scripts/main.js"></script>
</body>

</html>

Answer 1

CSS 背景图像值的格式应为：

url(site.com/someimage.png)

您缺少 url 包装器。

如何将 backgroundImage 属性设置为 Rest API 中的 URL？

How do you set the backgroundImage property to a URL in a Rest API?

html

javascript

css

rest

background-image

如何将 backgroundImage 属性 设置为 Rest API 中的 URL？

How do you set the backgroundImage property to a URL in a Rest API?

html

javascript

css

rest

background-image

如何将 backgroundImage 属性设置为 Rest API 中的 URL？