如何正确引用HTML中的图片位置避免显示错误？

<div class="article-content">
  <section>
    <h2>HTML图片引用的核心方法</h2>
    <p>在网页开发中，正确引用图片位置直接影响用户体验与搜索引擎收录效果，以下是五种主流方式及其应用场景：</p>
    <div class="code-example">
      <h3>1. 同级目录引用</h3>
      <pre>&lt;img src="logo.png" alt="企业标识"&gt;</pre>
      <p>适用场景：图片与HTML文件处于相同文件夹时，建议优先采用这种简洁的引用方式</p>
    </div>
    <div class="notice-tip">
      <p> 专业建议：始终为图片添加描述性alt属性，这对视障用户和搜索引擎理解图片内容至关重要</p>
    </div>
    <div class="code-example">
      <h3>2. 子目录引用</h3>
      <pre>&lt;img src="images/header-bg.jpg" alt="页首背景"&gt;</pre>
      <p>目录结构示例：
        <ul>
          <li>index.html</li>
          <li>images/
            <ul>
              <li>header-bg.jpg</li>
            </ul>
          </li>
        </ul>
      </p>
    </div>
    <div class="comparison-table">
      <h3>引用方式对比</h3>
      <table>
        <tr>
          <th>类型</th>
          <th>加载速度</th>
          <th>维护成本</th>
          <th>适用场景</th>
        </tr>
        <tr>
          <td>相对路径</td>
          <td>快</td>
          <td>低</td>
          <td>中小型网站</td>
        </tr>
        <tr>
          <td>绝对路径</td>
          <td>中等</td>
          <td>高</td>
          <td>CDN资源</td>
        </tr>
        <tr>
          <td>外部资源</td>
          <td>不定</td>
          <td>低</td>
          <td>第三方素材</td>
        </tr>
      </table>
    </div>
  </section>
  <section>
    <h2>高级优化策略</h2>
    <div class="optimization-strategy">
      <h3>3. 动态路径控制</h3>
      <pre>&lt;base href="https://cdn.example.com/assets/"&gt;
&lt;img src="2025/product-shot.png" alt="产品展示"&gt;</pre>
      <p>技术要点：
        <ol>
          <li>base标签需放置在head区域</li>
          <li>适用于多环境部署场景</li>
          <li>注意路径拼接逻辑</li>
        </ol>
      </p>
    </div>
    <div class="seo-recommendation">
      <h3>SEO优化实践</h3>
      <ul>
        <li>使用WebP格式节省30%以上带宽</li>
        <li>添加width和height属性预防布局偏移</li>
        <li>实施懒加载技术：
          <pre>&lt;img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy"&gt;</pre>
        </li>
      </ul>
    </div>
  </section>
  <section class="qa-section">
    <h2>常见问题解析</h2>
    <div class="qa-item">
      <p class="question">Q：图片显示失败的可能原因？</p>
      <p class="answer">A：检查三个关键点：
        <ul>
          <li>文件路径大小写敏感性</li>
          <li>服务器文件权限设置</li>
          <li>浏览器缓存干扰（建议强制刷新）</li>
        </ul>
      </p>
    </div>
  </section>
  <footer class="references">
    <h2>权威参考资料</h2>
    <ul>
      <li>MDN Web Docs: <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img" target="_blank">HTML图片元素规范</a></li>
      <li>W3C标准: <a href="https://www.w3.org/TR/html52/semantics-embedded-content.html" target="_blank">嵌入式内容技术标准</a></li>
      <li>Google开发者文档: <a href="https://developers.google.com/speed/docs/insights/OptimizeImages" target="_blank">图片优化指南</a></li>
    </ul>
  </footer>
</div>
<style>
.article-content {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Segoe UI', system-ui;
  line-height: 1.6;
}
.code-example {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
  margin: 1.5rem 0;
}
.notice-tip {
  background: #e3f2fd;
  border-left: 4px solid #2196f3;
  padding: 1rem;
  margin: 1.5rem 0;
}
.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.comparison-table th, .comparison-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}
.optimization-strategy pre {
  background: #fff5f5;
  padding: 1rem;
  border-radius: 6px;
}
.seo-recommendation ul {
  list-style-type: circle;
  padding-left: 2rem;
}
.qa-section .question {
  color: #2c3e50;
  font-weight: 600;
}
.references ul {
  padding-left: 1.5rem;
}
.references a {
  color: #0366d6;
  text-decoration: none;
}
.references a:hover {
  text-decoration: underline;
}
h2, h3 {
  color: #1a237e;
  margin-top: 1.5em;
}
pre {
  overflow-x: auto;
  padding: 1em;
  background: #f5f5f5;
  border-radius: 4px;
}
</style>