如何在Bootstrap 5.3.2轮播模板的SVG占位符中替换自定义圆角图片

直接用<img>标签替换整个SVG代码块即可，操作步骤简单直接：

• 删除原有的SVG代码块，替换为<img>标签
• 在src属性中填入你的个人图片路径（本地图片写相对路径，比如./images/avatar.jpg；线上图片填完整地址）
• 保留原有的rounded-circle类（这是Bootstrap实现圆形圆角效果的核心类），同时保留width="140"、height="140"属性，别忘了添加alt属性说明图片内容（提升页面可访问性）

替换前后代码对比 #

原SVG占位代码：

<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false">
        <title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect>
        <text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>

替换后的<img>代码示例：

<img class="rounded-circle" width="140" height="140" src="你的图片路径" alt="个人头像">

额外提示 #

如果你的图片不是正方形，添加object-fit: cover样式可以让图片填满圆形容器且不变形，示例代码：

<img class="rounded-circle" width="140" height="140" src="你的图片路径" alt="个人头像" style="object-fit: cover;">

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