html代码显示图片

HTML 图片显示基础

基本语法

使用 <img> 标签插入图片，核心属性为 src（图片路径）和 alt（替代文本）。

<img src="image.jpg" alt="描述文字">

常见属性详解

1. src

   • 支持相对路径（如 "images/pic.jpg"）或绝对路径（如 "https://example.com/image.png"）。
   • 若路径错误,图片无法加载，浏览器会显示 alt 文本。

2. alt

   • 必须为图片提供有意义的描述,提升 SEO 和无障碍访问。
   • 示例：<img src="logo.png" alt="公司Logo">

3. width 和 height

   • 可直接设置固定值,或通过 CSS 控制。
   • 建议仅设置其中一个值,保持图片比例（如只设 width，高度自动缩放）。

4. title

   • 提供额外信息,但非必需。
   • 示例：<img src="map.jpg" alt="地图" title="城市交通图">

响应式图片（适配不同设备）

使用 srcset 和 sizes 属性实现响应式：

<img 
  src="small.jpg" 
  srcset="medium.jpg 600w, large.jpg 1000w" 
  sizes="(max-width: 600px) 100vw, 50vw" 
  alt="响应式图片">

• srcset：定义不同尺寸的图片路径（按屏幕宽度切换）。
• sizes：指定不同屏幕宽度下的图片显示比例。

常见问题与解决方案

优化技巧

1. 懒加载
   延迟加载图片，提升首屏速度：

   <img src="placeholder.jpg" data-src="real.jpg" alt="内容">

   配合 JavaScript 实现真实加载。

2. 压缩图片
   使用工具（如 TinyPNG、ImageOptim）压缩图片体积，减少加载时间。

3. 使用现代格式
   优先选择 WebP 格式（需浏览器支持）：

   <img src="image.webp" alt="优化图片">

相关问题与解答

问题 1：如何动态替换图片？

解答：通过修改 src 属性或使用 JavaScript。

document.getElementById('myImage').src = 'new-image.jpg';

或直接在 HTML 中更新路径：

<img id="myImage" src="old.jpg" alt="旧图">

问题 2：如何让图片保持原始比例缩放？

解答：

1. CSS 方法：

   img {
     max-width: 100%; / 宽度不超过容器 /
     height: auto;    / 高度自动适应 /
   }

2. HTML 方法：
   只设置 width 或 height 中的一个值