I'm facing a simple issue that I can't seem to solve. As a beginner in using bootstrap, I'm struggling to figure out how to insert an image into the card header. I've been searching online for solutions for the past 30 minutes with no luck. I know this might be a basic question, but any help would be greatly appreciated.
Here is the image I'm trying to insert:
I can't seem to place it correctly within the rect tag or the svg tag. Any guidance or assistance would be helpful.
<div class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef" dy=".3em">Project 1</text></svg>
<div class="card-body">
<p class="card-text">Click "View" to see my posted Project 1. Project 1 is my personal Student Feedback Form. When the form is submitted it will display to you the data inputted as well as give the course and professor a score.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm grateful for any assistance you can provide.