ngIf 和图片 html 元素中的类

Question

我开始使用 Angular 和 Typescript，目前我遇到了一个问题，所以我正在寻找一些指导。实际上，我想在

*ngIf

html 元素中实现一个类和一个

<picture></picture>

条件。

但是我不明白我应该在哪里应用它？在

<picture>

标签中，在

<source>

标签中，还是在

<img>

标签中？

另外，alt 和 title 属性应该放在哪里？在

<img>

标签中？

<picture>
   <source srcset="image.webp" type="image/webp">
   <img src="image.png" alt="" title=""/>
</picture>

预先感谢您的回答

Answer 1

虽然你想要达到的目标还不清楚，但让我试着解释一下所有的场景。通常，如果图片标签看起来像那样，则意味着浏览器将首先尝试加载 webp 图片，如果失败，它将加载图片内的图片标签。

现在让我们讨论一下应用 ngIf 条件。有3种可能，我来说明情况

1. 如果应用于图片标签 - 它将根据条件渲染图片。所以如果条件为假，在这种情况下它不会渲染任何图像
2. 如果应用于源标签 - 它会根据条件在图片中添加或删除源标签。即使条件为假，图像也会被渲染，因为它要么加载任何其他源标签（如果存在），要么回退到 img 标签并渲染图像
3. 如果应用在 img 标签上——在图像标签上应用 ngIf 没有任何意义，因为这是一个后备图像，只有在上述图像都无法渲染时才会渲染

就类或样式属性而言，它可以应用于任何标签。如果应用于图片标签，则该样式适用于源标签的容器。如果您想单独设置每个源标记的样式，您可以通过将其专门应用于源标记来实现。在大多数情况下，需要在图片标签上应用样式。

关于 alt 和 title 属性，title 属性可以放在 source 和 img 标签上。但是将 alt 属性放在 img 标签中是有意义的，因为这是最终的后备图像，如果无法呈现，将显示 alt 文本

这里有一个示例实现如果你想玩。

如果有帮助，请标记为答案。快乐编码:)

Answer 2

1. 创建一个 HTML

   img

   元素。
2. 设置

   src

   元素的

   img

   属性为需要展示的图片来源
3. 添加一个

   *ngIf

   指令到

   img

   元素来检查是否应该显示图像。
4. 创建两个 CSS 类来设置

   img

   元素的样式，一个用于图像显示时，一个用于图像隐藏时。
5. 将

   *ngIf

   指令对应的类添加到

   img

   元素中。

代码如下：

<img [src]="imageSource" *ngIf="showImage" [ngClass]="{ 'display-image': showImage, 'hide-image': !showImage }">

.display-image {
  display: block;
  width: 100%;
}

.hide-image {
  display: none;
}

注意：在上面的代码中，

imageSource

和

showImage

是您需要在组件中定义的变量。此外，调整类名称以匹配所需的样式。