我正在尝试访问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>
1条答案
按热度按时间5sxhfpxr1#
css背景图像值的格式应为：
url(site.com/someimage.png)您缺少url Package 器。