Angular中<picture>标签的*ngIf、类绑定及属性配置疑问

一、*ngIf与类绑定的应用位置 #

• 控制整个图片模块显隐：把*ngIf直接加在<picture>标签上，这样整个包含<source>和<img>的结构会一起被渲染或移除，适合需要整体控制的场景。
• 针对特定格式源做条件控制：如果有额外业务逻辑要强制开启/关闭某类格式（比如仅在特定环境加载webp），把*ngIf加在对应的<source>标签上。不过通常不用这么做，<source>的type属性会让浏览器自动判断是否支持webp，原生逻辑已经能满足兼容需求。
• 类绑定的选择：样式如果是控制图片容器的布局，绑定在<picture>标签上；如果是控制图片本身的尺寸、圆角等样式，绑定在<img>标签上——因为最终在页面上渲染的可视元素是<img>。

二、alt和title属性的放置位置 #

直接把alt和title都放在<img>标签里就好：

• alt是无障碍属性，浏览器只会读取<img>的alt内容，用于屏幕阅读器识别图片；
• title是hover提示属性，同样只有在<img>上才会生效，用户鼠标悬停时显示提示文本。
  <picture>和<source>不需要设置这两个属性，设置了也不会起作用。

示例代码 #

<!-- 控制整个图片模块显隐，同时给容器加样式 -->
<picture *ngIf="isImageVisible" class="product-image-container">
  <!-- 可选：通过业务逻辑控制webp源是否加载 -->
  <source *ngIf="allowWebp" srcset="product-image.webp" type="image/webp">
  <!-- 最终兜底的png，同时设置无障碍和提示属性 -->
  <img src="product-image.png" alt="产品主图：XX型号无线耳机" title="点击查看产品详情" class="product-image">
</picture>

内容的提问来源于stack exchange，提问作者Mitro13