会触发加载，但仅在脚本被禁用或不支持时；此时img与普通图片一样同步加载、触发onload并参与懒加载逻辑。
noscript 标签里放 <img> 会触发加载吗
会，但仅在脚本被禁用或不支持时触发。浏览器解析到 <noscript></noscript> 时，会先判断当前环境是否满足“脚本未执行”条件；满足则正常渲染其内部所有 HTML，包括 <img src="..."> —— 此时该 <img> 和普通页面图片一样发起网络请求、触发 onload、参与懒加载逻辑（如果写了 loading="lazy"）。
关键点在于：这不是“延迟加载”，也不是“备用 fallback 加载”，而是“条件性同步加载”。它和 JS 是否存在无关，只和 JS 执行状态有关。
-
<noscript><img src="logo.svg"></noscript>在禁用 JS 的浏览器中会立即加载 - 同一页面若启用了 JS，这段
<img>根本不会被解析，也就不会发请求 - 不要指望它替代
<picture></picture>或srcset的响应式能力——<noscript></noscript>内部不执行 JS，也无法动态选图
为什么 <noscript></noscript> 里的 <img> 经常加载失败或错位
常见原因不是标签写错，而是路径、尺寸、语义三方面脱节：
- 路径错误：JS 启用时你可能用 JS 动态拼接了
src（比如基于 CDN 域名或设备 DPR），而<noscript></noscript>里写的却是相对路径或固定域名，导致 404 - 缺失
width/height：没有宽高属性的<img>在禁用 JS 时会塌陷，造成布局跳动（CLS），尤其在首屏 - alt 值不一致：JS 渲染的图片可能带上下文描述，而
<noscript></noscript>里写的是空字符串或占位文本，影响可访问性和 SEO - 响应式断层：JS 里用
srcset+sizes适配不同屏幕，<noscript></noscript>里只留一个src，小屏下加载大图，浪费带宽
如何让 <noscript></noscript> 中的 <img> 真正可用
目标不是“让它看起来像 JS 版”，而是“让它在无 JS 场景下独立成立”。实操建议如下：
- 用完整、绝对、带版本号的 URL：
src="https://cdn.example.com/v2/logo-320w.png"，避免相对路径或变量插值 - 必须声明
width和height属性，且与实际图片原始尺寸一致（不是 CSS 缩放后的尺寸） - 提供有意义的
alt，不是 “logo” 而是 “公司名称官方标识，蓝色渐变文字” - 如需响应式，只能靠服务端 UA 判断或预生成多尺寸图，然后在
<noscript></noscript>里手动写<picture></picture>：<noscript><picture><source media="(max-width: 768px)" srcset="logo-sm.webp"><img src="logo-lg.webp" alt="..."></source></picture></noscript> - 禁止在
<noscript></noscript>里写内联样式或 JS 可读取的data-属性——它们不会被解析或生效
<noscript></noscript> 不是图片降级兜底的万能方案
真正容易被忽略的一点：现代浏览器几乎都支持 JS，<noscript></noscript> 的实际触达场景极窄——主要是企业内网策略禁用 JS、老旧终端、或隐私浏览器（如 LibreWolf 默认禁脚本）。为这种低概率场景投入大量资源做多格式适配、CDN 分流、DPR 检测，性价比很低。
更务实的做法是：把 <noscript></noscript> 当作「最小可用内容保障」，只放最关键的 logo、核心 banner 图，并确保它们体积小（decoding="async" 避免阻塞渲染、用 fetchpriority="high" 提升首屏图优先级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
