我正在尝试访问Rest API以访问其中的图像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>
CSS背景图像值的格式应为：
url(site.com/someimage.png)
您缺少url包装器。