How can I run a function and return output as image src javascript

Question

I have a function that determines which source the image will be:

function facilityImg(arr, x) {
    switch (arr[x]) {
        case 'Yes':
            return "Images/checked.png";
        case 'No':
            return "Images/unchecked.png";
    }
}

Where arr is an array of Yes/No strings, and x is the index of each value.

I am trying to run this function like this:

let html = `<div class="facilityCell">
               <img class="facilityIcon" title="Air-Conditioner" src="Images/air-conditioner.png">
               <img class="facilityIcon" src='facilityImg(${facilityArr}, 0)'>
            </div>`

When inspecting the html element, I get this as the src:

Is there something I am doing wrong? I have tried with [src] and :src which should apparently work. And before you shoot me down in the comments, I am repeating this code but slightly different each time for a minor project - cant be bothered to write out another 400 lines in the correct way.

Is what I am wanting to do possible?

Answer 1

You just need to correct the interpolation of your function. Try

let html = `<div class="facilityCell">
              <img class="facilityIcon" title="Air-Conditioner" src="Images/air-conditioner.png">
              <img class="facilityIcon" src="${facilityImg(facilityArr, 0)}">
            </div>`

Hope that fixes it