代码之家 › 专栏 › 技术社区 › Reza

如何在自定义元素(Web组件)中引用资源

custom-element web-component angular javascript

Reza · 技术社区 · 6 年前

如下所示

 <img src="./assets/bot.png" alt="{{botTitle}}" />

在本地,一切正常,我发布了我的自定义元素到firebase主机和javascript,css和资产文件夹已经存在于我的主机上。

然后我尝试在另一个html峰值中使用我的web组件,如下所示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>TMIBot</title>
    <base href="/">

    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, user-scalable=no">

    <title>Test Angular Elements</title>
    <link rel="stylesheet" href="https://myproject.firebaseapp.com/dist/dlx-styles-1.0.css">

</head>

<body>
    <dlx-chat></dlx-chat>
    <script type="text/javascript" src="https://myproject.firebaseapp.com/dist/dlx-chatbot-1.0.js"></script>
</body>

</html>

并通过本地http服务器(http服务器)提供服务

./assets/bot.png 它不存在于托管网站中,它们存在于我在firebase中发布的网站上。

我知道我可以通过一个完整的网址来引用它们,但我也认为有一个明显的解决方案,我错过了。

我很感激你的帮助

2 回复 | 直到 6 年前

Intervalia 6 年前

一种选择是将图像作为数据而不是链接嵌入:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAAD
 NCAMAAAAsYgRbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c
 cllPAAAABJQTFRF3NSmzMewPxIG//ncJEJsldTou1jHgAAAARBJREFUeNrs2EEK
 gCAQBVDLuv+V20dENbMY831wKz4Y/VHb/5RGQ0NDQ0NDQ0NDQ0NDQ0NDQ
 0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0PzMWtyaGhoaGhoaGhoaGhoaGhoxtb0QGho
 aGhoaGhoaGhoaGhoaMbRLEvv50VTQ9OTQ5OpyZ01GpM2g0bfmDQaL7S+ofFC6x
 v3ZpxJiywakzbvd9r3RWPS9I2+MWk0+kbf0Hih9Y17U0nTHibrDDQ0NDQ0NDQ0
 NDQ0NDQ0NTXbRSL/AK72o6GhoaGhoRlL8951vwsNDQ0NDQ1NDc0WyHtDTEhD
 Q0NDQ0NTS5MdGhoaGhoaGhoaGhoaGhoaGhoaGhoaGposzSHAAErMwwQ2HwRQ
 AAAAAElFTkSuQmCC" alt="beastie.png" scale="0">

这将创建一个100%自包含的组件,而不是依赖两个或多个文件。

这确实增加了HTML文件的大小,但是如果你的图像都相当小,那么这就不重要了。

Osama 6 年前

<img [src]="getBotImage(request)" alt="{{botTitle}}" />

getBotImage(request: TypeOfRequestHere) {
    // function body
}

Paul-Alexandre Naud 5 年前

您还可以将@Input()原点添加到angular元素中,并使用它构建所有URL。

<dlx-chat origin="https://myproject.firebaseapp.com/dist"></dlx-chat>
<script type="text/javascript" src="https://myproject.firebaseapp.com/dist/dlx-chatbot-1.0.js"></script>

角元素:

@Component({
  selector: 'dlx-chat',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  @Input() origin = '';
  constructor(private storeService: StoreService) {}
  ngOnInit(): void {
    this.storeService.origin = this.origin;
  }
}

@Injectable({  providedIn: 'root'})
export class StoreService {
  public origin = '';
  constructor() {}
}

@Component({
  selector: 'app-foo',
  template: `<img [src]="imgOri() + '/assets/images/PATH_TO_MY_IMAGE.jpg'">`,
  styleUrls: ['./foo.component.scss']
})
export class FooComponent {
 constructor(private storeService: StoreService){}
 imgOri(): string { return this.storeService.origin; }
}

-1

Prezes 4 年前

我准备好了 --base-href --deploy-url