Как я должен ссылаться на активы в угловом пользовательском элементе (веб-компоненты) - PullRequest
Новая
       49

Как я должен ссылаться на активы в угловом пользовательском элементе (веб-компоненты)

0 голосов
/ 07 октября 2018

Я создал веб-компонент, и я сослался на изображение из папки моего ресурса там

, как показано ниже 

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

на локальном все в порядке, я опубликовал свой пользовательский элемент на хосте firebaseи javascript, css и папка ресурсов уже существуют на моем хосте.

, затем я попытался использовать свой веб-компонент в другой HTML-странице, как показано ниже 

<!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.

Я знаючто я могу отослать их по полному URL, но я думаю, что есть очевидное решение, и я пропустил.

Я ценю помощь

Ответы [ 3 ]

0 голосов
/ 07 октября 2018

Один из вариантов будет включать изображение в виде данных вместо ссылки: 

<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-файл, но если ваши изображения довольно маленькие, это не должно иметь большого значения.

0 голосов
/ 22 мая 2019

Вы также можете добавить источник @Input () к вашему угловому элементу и использовать его для построения всех ваших URL.

HTML: 

<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; }
}
0 голосов
/ 07 октября 2018 
<img [src]="getBotImage(request)" alt="{{botTitle}}" />

И в вашем файле ts создайте функцию, которая импортирует изображение из Firebase 

getBotImage(request: TypeOfRequestHere) {
    // function body
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...