How Should I Reference Assets In Angular Custom Element (Web Components)

I have created a web component and I referenced image from my asset folder in there as below on local everything is fine,

Solution 1:

One option would be to embed the image as data instead of a link:

<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">

This will create a component that is 100% self contained instead of relying on two, or more, files.

This does increase the size of your HTML file, but if your images are all fairly small then it shouldn't matter much.

Solution 2:

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

And in your ts file create the function that import image from Firebase

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

Solution 3:

You can also add an @Input() origin to your angular Element and use it to build all your urls.

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>

Angular Element :

@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; }
}

Solution 4:

I set --base-href and --deploy-url so my assets were prefixed with custom url (in my case it was the same place whrere main.js was deployed)