我来帮你搞定这个问题——其实原因很明确，就是你外层.row上的align-items-center类在搞鬼！

问题根源 #

Bootstrap的.row本质是个flex容器，align-items-center会让容器内的所有子元素在垂直方向上居中对齐。而你的.card作为这个row的直接子元素，没有设置固定高度，同时card内部又嵌套了另一个.row.g-0（也是flex布局），这就导致浏览器在计算元素高度时出现了冲突：外层flex的居中规则会强制card的高度适应容器，而内部的flex布局又需要由内容撑开高度，最终的结果就是图片所在的.col-md-4被挤压成了0高度，图片自然就看不到了。

而当你把card放在row外面时，它是普通的块级元素，高度由内部内容自然撑开，内部的布局逻辑就能正常工作，图片也就显示正常了。

解决方案（三种可选） #

1. 给card添加d-block类（推荐）

强制card成为块级元素，脱离外层flex容器的对齐规则影响：

<div class="card mb-3 d-block" style="max-width: 540px;">

2. 移除外层row的align-items-center类

如果你的页面不需要这个垂直居中的效果，直接去掉这个类就行：

<div class="row mt-5 custom-row2 p-5">

3. 给card添加align-self-stretch类

让card占满外层row的高度，这样内部的flex布局就能正常计算高度：

<div class="card mb-3 align-self-stretch" style="max-width: 540px;">

修复后的完整代码示例（用第一种方案） #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container" id="mainContainer">
  <div class="row mt-5 custom-row2 p-5 align-items-center">
    <div class="card mb-3 d-block" style="max-width: 540px;">
      <div class="row g-0">
        <div class="col-md-4">
          <img src="https://cdn.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png" class="img-fluid rounded-start" alt="Profile Picture">
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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