how can change the image card in bootstrap?

I just need help how can I get different image for this. I keep getting the same copied image I want the id 1 to have different image. thank you I want to present this as my defense in class.

let htmlString = `
<div class="col-md-4 card" id="pet_${id}">      
    <img class="card-mg-top pet_img" src="pet3.gif">
    <div class="card-body">
        <div>Id: <span class="pet_id">${id}</span></div>
        <div>Damage: <span class="pet_damage">${data.damage}</span></div>
        <div>Magic: <span class="pet_magic">${data.magic}</span></div>
        <div>Endurance: <span class="pet_endurance">${data.endurance}</span></div>
        Time to Starvation:${deathTime}</span></div>
        <div class="progress">
            <div class="progress-bar" style="width: ${percentageString};">

            </div>
        </div>
        <button data-pet-id="${id}" class="feed_button btn btn-primary btn-block">Feed</button>
    </div>
</div>`;

Answer

It’s because your img src is hard coded to pet3.gif. You probably want to assign a variable name to each image you want with each id.

For eg.

1. Image for id 1: pet_1.gif
2. Image for id 2: pet_2.gif
3. Image for id 3: pet_3.gif…

You get the idea. And then you can have the id inserted in the src the way you’ve done it everywhere else.

src="pet_${id}.gif"