在Angular 9中,使用[attr.src]来设置HTML元素的src属性可以通过以下几个步骤来实现:
import { Component, ElementRef, ViewChild } from '@angular/core';
@ViewChild('myImg') myImg: ElementRef;
这里的'myImg'是你在HTML模板中给img元素定义的标识符。
<img #myImg [attr.src]="imageUrl" alt="My Image">
这里的imageUrl是你组件类中定义的一个变量,用来存储图片的URL。
imageUrl: string = 'https://example.com/my-image.jpg';
你可以将图片的URL替换成你实际使用的图片URL。
ngAfterViewInit() {
this.myImg.nativeElement.src = this.imageUrl;
}
这样,在视图加载完成后,Angular会自动将this.imageUrl的值赋给img元素的src属性。
需要注意的是,[attr.src]方式仅在Angular的属性绑定中使用。如果你希望动态改变img元素的src属性,还可以使用双大括号插值表达式{{}}或者ngBind属性绑定来实现。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云对象存储(COS)
请注意,这只是一种方法,如果你对Angular 9有其他疑问或需要更多帮助,请提供具体的问题描述,我将尽力给出更全面的答案。
领取专属 10元无门槛券
手把手带您无忧上云