html插入本地图片

HTML插入本地图片的方法

基本语法

使用 <img> 标签插入图片，通过 src 属性指定本地图片路径。

<img src="images/pic.jpg" alt="描述文字">

路径说明

图片属性设置

完整示例

<img src="./photos/landscape.png" 
     alt="风景照片" 
     width="600" 
     height="400" "美丽的山景">

常见问题与解答

问题1：图片无法显示怎么办？

解答：

1. 检查路径是否正确（注意大小写和斜杠方向）
2. 确认图片文件存在于指定位置
3. 尝试使用绝对路径测试（如 src="/images/pic.jpg"）
4. 清除浏览器缓存刷新页面

问题2：如何控制图片大小？

解答：

• 固定尺寸：直接设置 width/height 属性（会拉伸图片）
• 保持比例：只设置宽度或高度，另一个属性留空
• CSS控制：

  <img src="pic.jpg" class="responsive-img">
  <style>
  .responsive-img {
    max-width: 100%;
    height: auto;