图像标签(img)的基本使用

图像标签(img)的基本使用

<img>标签是HTML中用于在网页上嵌入图像的核心元素。它不需要闭合标签，属于空元素。图像可以是JPEG、PNG、GIF、SVG等格式，通过src属性指定图像来源。

基本语法和属性

最基本的图像标签只需要src和alt两个属性：

<img src="example.jpg" alt="示例图片">

常用属性包括：

• src：指定图像URL（必需）
• alt：替代文本（强烈建议使用）
• width/height：设置显示尺寸
• loading：控制懒加载行为
• decoding：控制解码方式

src属性的详细用法

src属性支持多种路径格式：

<!-- 相对路径 -->
<img src="../images/logo.png" alt="公司标志">

<!-- 绝对路径 -->
<img src="/assets/photos/profile.jpg" alt="个人头像">

<!-- 完整URL -->
<img src="https://example.com/pic.jpg" alt="网络图片">

<!-- Base64编码图像 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="内联图片">

alt属性的重要性

alt属性不仅对SEO有帮助，更是无障碍访问的关键：

<!-- 描述性文本 -->
<img src="chart.png" alt="2023年季度销售趋势图：Q1增长15%，Q2增长22%">

<!-- 装饰性图片 -->
<img src="divider.png" alt="">

<!-- 带链接的图片 -->
<a href="product.html">
  <img src="product-thumbnail.jpg" alt="新款智能手机 - 点击查看详情">
</a>

尺寸控制

建议同时指定width和height以避免布局偏移：

<!-- 固定尺寸 -->
<img src="photo.jpg" width="800" height="600" alt="风景照片">

<!-- 响应式设计（结合CSS） -->
<style>
  .responsive-img {
    max-width: 100%;
    height: auto;
  }
</style>
<img src="large-image.jpg" class="responsive-img" alt="响应式图片">

高级用法

srcset和sizes属性

实现响应式图像加载：

<img src="small.jpg"
     srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 1000px) 768px, 1200px"
     alt="响应式图片示例">

懒加载

优化页面加载性能：

<img src="placeholder.jpg" 
     data-src="actual-image.jpg" 
     loading="lazy" 
     alt="懒加载图片"
     class="lazyload">

图片映射

创建可点击区域：

<img src="worldmap.jpg" alt="世界地图" usemap="#worldmap">

<map name="worldmap">
  <area shape="rect" coords="34,44,270,350" href="europe.html" alt="欧洲">
  <area shape="circle" coords="337,300,44" href="australia.html" alt="澳大利亚">
</map>

性能优化技巧

1. 选择合适的图片格式：

   • 照片用JPEG
   • 图标/简单图形用PNG
   • 动画用GIF
   • 矢量图形用SVG

2. 使用现代格式：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="后备图片">
</picture>

3. 预加载关键图片：

<link rel="preload" href="hero-image.jpg" as="image">

常见问题解决方案

图片加载失败

使用onerror事件提供备用方案：

<img src="primary.jpg" 
     onerror="this.src='fallback.jpg';this.alt='图片加载失败'" 
     alt="主要图片">

居中显示

多种CSS实现方式：

<style>
  .center-img {
    display: block;
    margin: 0 auto;
  }
  
  .flex-center {
    display: flex;
    justify-content: center;
  }
</style>

<!-- 方法1 -->
<img src="logo.png" class="center-img" alt="居中标志">

<!-- 方法2 -->
<div class="flex-center">
  <img src="banner.jpg" alt="横幅广告">
</div>

图片滤镜效果

通过CSS添加视觉效果：

<style>
  .filtered-image {
    filter: grayscale(50%) brightness(110%);
    transition: filter 0.3s;
  }
  .filtered-image:hover {
    filter: none;
  }
</style>

<img src="portrait.jpg" class="filtered-image" alt="带滤镜的人像">

实际应用案例

产品展示画廊

<div class="product-gallery">
  <img src="product-1.jpg" 
       alt="蓝色T恤正面" 
       data-fullsize="product-1-large.jpg"
       class="thumbnail">
       
  <img src="product-2.jpg" 
       alt="蓝色T恤背面" 
       data-fullsize="product-2-large.jpg"
       class="thumbnail">
       
  <img src="product-3.jpg" 
       alt="蓝色T恤细节" 
       data-fullsize="product-3-large.jpg"
       class="thumbnail">
</div>

<script>
  document.querySelectorAll('.thumbnail').forEach(img => {
    img.addEventListener('click', () => {
      const fullsize = img.getAttribute('data-fullsize');
      window.open(fullsize, '_blank');
    });
  });
</script>

用户头像处理

<div class="avatar-container">
  <img src="user-avatar.jpg" 
       alt="用户头像" 
       width="150" 
       height="150"
       class="avatar"
       onerror="this.src='default-avatar.png'">
</div>

<style>
  .avatar {
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
</style>

浏览器兼容性注意事项

1. 旧版IE的PNG透明度问题：

<!--[if lt IE 7]>
  <style type="text/css">
    img { behavior: url(iepngfix.htc); }
  </style>
<![endif]-->

2. 图片格式支持检测：

function checkWebPSupport(callback) {
  const img = new Image();
  img.onload = function() {
    callback(img.width > 0 && img.height > 0);
  };
  img.onerror = function() {
    callback(false);
  };
  img.src = 'data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==';
}

安全最佳实践

1. 防止图片盗链：

<!-- 在.htaccess中设置 -->
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^https://(www\.)?yourdomain.com/.*$ [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [F]

2. 内容安全策略：

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; img-src 'self' data: https://trusted.cdn.com">

3. 防止图片注入：

// 服务器端处理上传图片示例
$allowed_types = ['image/jpeg', 'image/png'];
if (!in_array($_FILES['image']['type'], $allowed_types)) {
  die('不允许的文件类型');
}