如何在Bootstrap中修改图片卡片？实现ID为1的卡片显示不同图片的方法

Hey there! Let's get that image differentiation working for your Bootstrap cards. Right now, you’re hardcoding the image source to pet3.gif for every card, which is why all of them show the same picture. We just need to add a quick conditional check based on the id value to swap in a unique image when the card's ID is 1.

Solution 1: Use a Ternary Operator (Concise) #

You can directly embed a conditional check in the src attribute using a ternary operator. This keeps your code compact and clean:

let htmlString = ` <div class="col-md-4 card" id="pet_${id}"> <img class="card-mg-top pet_img" src="${id === 1 ? 'special-pet-image.gif' : '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>`;

Just replace special-pet-image.gif with the actual filename/path of the image you want for ID 1.

Solution 2: Use an If Statement (More Readable for Beginners) #

If you prefer clearer, step-by-step logic, define the image source first with an if statement before building your HTML string:

// Define the image source based on the current ID
let imgSource = 'pet3.gif';
if (id === 1) {
  imgSource = 'special-pet-image.gif'; // Swap this with your target image file
}

// Now use the dynamic image source in your HTML template
let htmlString = ` <div class="col-md-4 card" id="pet_${id}"> <img class="card-mg-top pet_img" src="${imgSource}"> <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>`;

How This Works #

Both approaches do the same core thing: during each loop iteration, they check if the current id equals 1. If yes, they use your specified unique image; otherwise, they fall back to the default pet3.gif. This ensures only the card with ID 1 gets the distinct picture, while all others stay consistent.

A quick reminder: make sure your unique image file exists in the correct directory relative to your HTML/JS file—missing file paths are a common reason images don’t load as expected!

内容的提问来源于stack exchange，提问作者Torfling