Menu
I have created a web component and I referenced image from my asset folder in there
as below
<img src="./assets/bot.png" alt="{{botTitle}}" />
on local everything is fine, I published my custom element to firebase host and javascript, css and asset folder already exist on my host.
then I tried to use my web component in another html peage as below
<!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>
and served this via a local http server (http-server)
The problem is images are loading from ./assets/bot.png which doesn't exist in in the hosted website, and they exists on my published website in firebase.
I know that I can refer them by a full url, but also I think there is a obvious solution and I missed.
I appreciate help
408
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.
106
<img [src]="getBotImage(request)" alt="{{botTitle}}" />
And in your ts file create the function that import image from Firebase
getBotImage(request: TypeOfRequestHere) {
// function body
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
