如何将backgroundimage属性设置为RESTAPI中的url？

fcy6dtqo 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(413)

我正在尝试访问rest api，以访问其中的图像url。character.crative具有url，并已成功打印。但是当我试图改变的时候 document.getElementById('portrait').style.backgroundImage 它返回一个空字符串。我只想将背景图像设置为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>