概述
标签是 HTML 中用于在网页上显示图像的基础元素。掌握其属性对于优化页面展示至关重要，例如添加边框、设置对齐方式以及处理加载异常等。许多跨境电商平台允许店主通过自定义 HTML 实现个性化页面设计，因此熟练控制图像显示效果是提升店铺专业度的关键技能。
本教程将详解 <img> 标签的核心用法：从基础的图片插入与路径声明，到尺寸定义与文本环绕排版。作为内联元素，图片默认与文本底部对齐，通过调整属性可实现图文混排的美观布局。此外，我们还将探讨如何利用 JavaScript 优雅处理图片加载失败的情况，避免显示破损图标或空白区域，确保用户体验的流畅性。
说明
1. 图片插入与路径引用
使用 <img> 标签即可在页面中嵌入图片。核心在于通过 “src” 属性指定图片来源，通常分为两种方式：
- 相对路径：基于当前网页位置定位图片。适用于图片与网页在同一服务器目录下的情况。
<img src="images/sample.jpg">
- 绝对路径：直接使用互联网上的完整 URL 地址。
<img src="http://www.yoursite.com/images/sample.jpg">
无论采用哪种方式，务必确保图片已上传至正确位置，否则浏览器将无法渲染。若后续迁移网站文件，相对路径可能需要相应调整。
2. Alt 属性（替代文本）
“alt” 属性不仅是 SEO 优化的重要因素，也是无障碍访问的关键。当图片无法加载时，该文本会作为替代内容显示。建议始终为每张图片添加描述性的 alt 值。
<img src="images/sample.jpg" alt="My Sample Image">
3. 尺寸控制（Height & Width）
通过 height 和 width 属性可预设图片显示大小。注意保持原始宽高比，以免图片变形失真。最佳实践是先压缩原图再缩小显示，而非强行放大小图，后者会导致像素化和模糊。
<img src="images/sample.jpg" height="100" width="75" alt="My Sample Image">
4. 图文对齐与环绕（Align）
图片默认为内联元素，不会自动换行。利用 align 属性可实现文本环绕效果，使版面更紧凑美观。常用值包括 left（左对齐）、right（右对齐）和 center（居中）。
<img src="images/sample.jpg" height="100" width="75" align="right" alt="My Sample Image">
5. 边框设置（Border）
border 属性用于定义图片边框宽度（单位：像素）。设置为 “0” 或直接省略该属性均可去除边框；设置为 “1” 则显示 1px 黑色边框。
<img src="images/sample.jpg" height="100" width="75" align="right" border="1" alt="My Sample Image">
6. 异常处理：隐藏加载失败的图片
当图片资源缺失或损坏时，浏览器通常会显示破损图标或保留空白边框，影响页面质感。可通过 onerror 事件结合 JavaScript 脚本，在加载失败时自动隐藏图片元素，保持界面整洁。
onerror="style.display='none';"
完整示例代码如下：
<img src="images/sample.jpg" height="100" width="75" align="right" border="1" alt="My Sample Image" onerror="style.display='none';">
掌握上述 <img> 标签属性，即使不依赖专业设计师，也能通过自定义 HTML 代码打造出精致、专业的电商详情页，有效提升品牌形象与转化率。