I'm using an API to get information for a database sort of thing. I want the images to be displayed to the right of the text but the images aren't showing up at all. I tried multiple different keys and still nothing. Here is what it currently looks like:

The images are not showing up as you can see.

Here is the JS (its pulling the data from here https://api.tvmaze.com/shows/347/episodes):

// DATABASE  const sunnyList = document.getElementById('sunnyList'); let sunnyInfo = [];

searchBar.addEventListener('keyup', (e) => {   const searchTarget = e.target.value.toLowerCase();   const filteredSunny = sunnyInfo.filter(sunny => {
    return sunny.name.toLowerCase().includes(searchTarget) || sunny.airdate.toLowerCase().includes(searchTarget) || sunny.airtime.includes(searchTarget)    });

  displayInfo(filteredSunny); });

const loadLayout = async () => {
    try {
        const res = await fetch('https://api.tvmaze.com/shows/347/episodes');
        sunnyInfo = await res.json();
        displayInfo(sunnyInfo);
    } catch (err) {
        console.error(err);
    } };

const displayInfo = (sunny) => {
    const htmlString = sunny
        .map((sunny) => {
            return `
            <li class="character">
              <div class="detail">
                <h2>${sunny.name}</h2>
                <p>Season ${sunny.season} Episode ${sunny.number}</p>
                <p>${sunny.airdate}</p>
                <p>${sunny.airtime}</p>
                <p>${sunny.rating.average}</p>
              </div>
                <img src="${sunny.image}"></img>
            </li>
        `;
        })
        .join('');
    sunnyList.innerHTML = htmlString; };

loadLayout();

I've tried sunny.image.medium and sunny.image.original but it still doesn't show up.

Any help is appreciated :)