<img> · HTML 元素参考 · 码译 VibeCode

码

码译 · VibeCodeHTML 元素参考 · 来自 MDN

<img>

Embeds an image into the document.

一句话说清

大白话：把一张图片塞进页面。它是「空元素」没有结束标签。最少要写 src（图在哪）和 alt（图挂了 / 读屏时显示啥）。

MDN 原文：Embeds an image into the document.

实时效果沙箱预览

<img src="https://mayi-vibecode.pages.dev/assets/logo.svg" alt="码译 VibeCode 的 logo" width="120" height="120">

属性	是干嘛的
`src`	图片文件的地址，告诉浏览器去哪拿图
`alt`	替代文字：图加载失败或读屏时显示，无障碍必填
`width`	宽度（像素整数），提前占位防布局跳动
`height`	高度（像素整数），和 width 配合预留空间
`loading`	加载策略：eager 立即加载 / lazy 滚动到附近才加载

1）alt 千万别省也别乱写——省了读屏会念文件名；写成「这是一张图片」也没用，要写图片真正表达的信息。2）用 loading="lazy" 懒加载时务必同时写 width / height，否则图加载前尺寸是 0，会严重布局跳动甚至永不加载。