HTML中使用If Else语法为img标签alt属性设置默认值的正确写法

你原有代码中使用|设置默认alt的写法是错误的，Angular模板中|是管道调用符，不能直接用作默认值 fallback。要实现需求可以用以下两种写法：

方式1：三元运算符（等价if else逻辑，全版本兼容） #

这是你需要的标准if else判断的模板实现语法：

<img *ngIf="document.story_image_1" 
     [src]="document.story_image_1" 
     class="image-1" 
     [alt]="document.image_alttxt ? document.image_alttxt : 'default alt text'"
/>

逻辑说明：先判断document.image_alttxt是否存在且非空，为真则使用该值，为假则使用后面的默认alt文本，完全对应你要的if else分支逻辑。如果你更习惯插值写法，把三元表达式放在{{}}内赋值给alt属性也可以正常运行。

方式2：空值合并运算符（简洁写法，Angular 12+支持） #

如果你的项目Angular版本在12及以上，可以用更简洁的空值合并语法，不需要重复写变量名：

<img *ngIf="document.story_image_1" 
     [src]="document.story_image_1" 
     class="image-1" 
     [alt]="document.image_alttxt ?? 'default alt text'"
/>

两种写法都可以实现需求，三元运算符的兼容性更广，适配所有Angular版本。

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