Variable background image help

[FlyFrosty]

Hello,

I am working on my clockface.  I have a background picture and am able to change the font displayed on it using the companion app settings.  What I can't figure out is how to change the background mage.  I have a selector which allows me to choose between image file names (when the developer menu actually shows my side-loaded app).  I get how to implement that information within the different CSS items preceding with a #, but how do I apply the information to an image listed in the SVG?  I'm obviously a noob and am hopefully missing something obvious and easy.

I want to be able to change "Boat.png"

<svg class="background">
  <image href="Boat.png" />
  <text id="myLabel" />
  <text id="myUTCLabel" pointer-events="visible"/>
  <text id="myCal" pointer-events="visible"/>
  <text id="today" pointer-events="visible"/>
  <text id="mySteps" pointer-events="visible"/>

</svg>

What I have so far...

messaging.peerSocket.onmessage = evt => {
  console.log(`App received: ${JSON.stringify(evt)}`);
  if (evt.data.key === "color" && evt.data.newValue) {
    let color = util.stripQuotes(evt.data.newValue);
    console.log(`Setting background color: ${color}`);
    myLabel.style.fill = color;
    myUTCLabel.style.fill = color;
    myCal.style.fill = color;
    mySteps.style.fill = color;
  } else if (evt.data.key === "pic" && evt.data.newValue) {
    let pic = util.stripQuotes(evt.data.newValue);
    console.log(`image selected: ${pic}`);
  }
};

[JonFitbit · Accepted solution]

Something like this:

Give your image an ID:

<image id="myImage" href="Boat.png" />

Then get a handle on the image:

let myImage = document.getElementById("myImage");

Then inside your onmessage event handler, set the image href:

let pic = util.stripQuotes(evt.data.newValue);
myImage.href = pic;

[FlyFrosty]

That was it!  Thank you.