Bootstrap5新区域图片无法加载求助（VSCode开发HTML网站）

我使用VSCode编写HTML网站，采用Bootstrap5框架，此前板块的图片可正常显示，但新添加板块中的图片无法加载。已检查语法错误与图片路径位置，仍未找到问题所在，仅需解决图片显示问题。相关代码如下：

<div class="container">
  <h2 class="text-center my-1 mt-5">Portafolio</h2>
  <p class="text-center mb-4">Subtítulo</p>
  <div class="row">
    <div class="col-lg-4 col-md-6 mb-4">
      <div class="card">
        <img src="/img/recursos/foto1.jpeg" class="card-img-top" alt="Imagen 1">
        <div class="card-body">
          <h5 class="card-title">Título de la imagen 1</h5>
          <p class="card-text">Descripción de la imagen 1</p>
        </div>
      </div>
    </div>
  </div>
</div>

排查与解决步骤 #

• 核对路径大小写：Windows系统对文件路径大小写不敏感，但使用Live Server插件或部署到Linux服务器时会严格区分。确认foto1.jpeg的文件名大小写和实际文件完全一致，比如避免出现Foto1.jpeg或foto1.JPEG这类差异。
• 调整路径类型：当前使用的是绝对路径/img/recursos/foto1.jpeg，该路径以网站根目录为起点。如果你的HTML文件不在项目根目录（比如放在pages子文件夹中），绝对路径会无法定位文件：
  • 若HTML文件和img文件夹同级，改成相对路径img/recursos/foto1.jpeg（去掉开头的斜杠）；
  • 若HTML在子文件夹（如pages/portafolio.html），则用../img/recursos/foto1.jpeg回到上一级目录后再定位图片。
• 验证文件有效性：再次确认img/recursos文件夹中确实存在foto1.jpeg，且文件未损坏。可以在浏览器地址栏直接输入图片的完整访问路径（比如http://localhost:5500/img/recursos/foto1.jpeg，根据Live Server端口调整），若无法打开则说明路径错误或文件损坏。
• 确认工作区根目录：使用Live Server插件时，确保VSCode打开的是项目根目录。右键点击项目根目录下的HTML文件，选择「Open with Live Server」，保证服务从正确的根目录启动，避免路径解析偏差。
• 强制刷新清除缓存：浏览器可能缓存了旧的错误资源，按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，或打开开发者工具（F12）在「网络」选项卡勾选「禁用缓存」后重新加载。

内容的提问来源于stack exchange，提问作者Andy B.