最直接有效的方式是用 css 的 display: none 彻底隐藏图片，推荐用于需动态切换的场景；若还需阻止加载，则必须移除或延迟赋值 src 属性，而非仅依赖样式隐藏。
想让网页里某张图片不显示，最直接有效的方式是用 CSS 的 display: none 或 visibility: hidden 控制，而不是删掉 <img> 标签或注释 HTML——后者会影响 DOM 结构和脚本逻辑。
用 style="display: none" 彻底隐藏图片（推荐）
这是最常用也最干净的做法：图片仍加载、仍存在于 DOM 中，但完全不占布局空间，视觉上彻底消失。
- 适用于需要后续 JS 动态显示/隐藏的场景，比如点击切换图显隐
- 不会触发重排（reflow），性能开销小
- 注意：图片依然会发起 HTTP 请求并下载，如果想“跳过加载”，得换其他方式（见下一条）
- 写法示例：
<img src="logo.png" style="max-width:90%">
用 loading="lazy" + 移除 src 实现“不加载也不显示”
如果目标是连图片资源都不加载（比如页面有大量备用图、仅部分需展示），光靠 CSS 隐藏不够，得从源头阻断请求。
- 把
src换成data-src，再配合 JS 控制是否赋值——这是懒加载常见模式 - 或者直接留空：
<img alt="图表">，不设src就不会发请求 - 注意：空
src（src=""）在某些浏览器会触发 404 请求，务必避免；用data-src更安全 - 若用
loading="lazy"，仅影响加载时机，不能阻止加载，必须配合移除src
用 opacity: 0 和 position: absolute 的坑
有人用透明度或绝对定位把图片“藏起来”，但这不是真正隐藏，容易引发意料外问题。
-
opacity: 0：图片还在文档流中，仍响应鼠标事件（如click），可能拦截下方元素操作 -
position: absolute; left: -9999px：虽不可见，但对屏幕阅读器仍可能暴露，且可能被搜索引擎抓取为无效内容 - 两者都不等价于
display: none，别混用作“隐藏”目的 - 如果真要兼顾可访问性，应同时加
aria-hidden="true"
真正要“不显示指定图片”，优先选 display: none；若还要求“不加载”，就得动 src 属性本身——这两步常被当成一回事，但底层机制完全不同，漏掉任一环节都可能白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
