Search code examples
javascripthtmlcssbackground-imagerest

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

I'm trying to access a Rest API to get access to an image URL within. Character.Portrait has the url and it prints successfully. But when I try to change

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

It returns an empty string. I just want to set the background image to the image at this URL in the JSON.

This is also my first question here, so I apologize if it's hard to read.

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>
Solution

  • A CSS background-image value should be in the format:

    url(site.com/someimage.png)

    You are missing the url wrapper.