![](/img/trans.png)
[英]how to include a random number variable inside the src attribute of img tag
[英]Is it possible to include an img src inside of Angular Element?
我正在使用 Angular 8 並嘗試使用 Angular Elements 包“@angular/elements”中的 createCustomElement() 命令創建一個可重用的 Web 組件
所以組件本身非常簡單。 它只包含一些包裝 HTML 代碼和一個帶有 src 到徽標圖像的 IMG 標記。 這是我的代碼。
HTML
<a [routerLink]="homeURL" class="logo-branding no-link flex-grow-2">
<img class="logo align-middle" [src]="headerImgPath">
<span class="branding text-nowrap">{{ this.headerBranding }}</span>
</a>
TS
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'header-logo',
templateUrl: './header-logo.component.html',
styleUrls: ['./header-logo.component.scss'],
})
export class HeaderLogoComponent implements OnInit {
@Input() logo: string;
@Input() branding: string;
@Input() url: string;
public headerImgPath = 'elements-assets/images/my-logo.svg';
public headerBranding = 'Platform Name';
public homeURL: string;
constructor() {}
ngOnInit() {
if (this.branding) {
this.headerBranding = this.branding;
}
if (this.logo) {
this.headerImgPath = this.logo;
}
if (this.url) {
this.homeURL = this.url;
}
}
}
然后我將代碼編譯成 AppModule 內部的 Web 組件,就像這樣。
const el = createCustomElement(LogoComponent, { injector: this.injector });
customElements.define('page-logo', el);
最后將導出的 JS 庫拉入一個新的自定義 HTML 頁面。
HTML
<div class="container" style="position: relative; height:200px; top: 100px;">
<page-logo></page-logo>
</div>
但我看到的只是 HTML 的一部分。
在瀏覽器中渲染為
<div class="container" style="position: relative; height:200px; top: 100px; >
<my-logo _ngcontent-trw-c0="">
<a class="logo-branding no-link flex-grow-2"></a>
</page-logo>
</div>
img 標簽從不渲染。
嘗試這個
<a [routerLink]="homeURL" class="logo-branding no-link flex-grow-2">
<img class="logo align-middle" [src]="elements-assets/images/my-logo.svg">
<span class="branding text-nowrap">{{ this.headerBranding }}</span>
</a>
或這個
<a [routerLink]="homeURL" class="logo-branding no-link flex-grow-2">
<img class="logo align-middle" [src]="this.logo">
<span class="branding text-nowrap">{{ this.headerBranding }}</span>
</a>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.