search

arkon / ng-inline-svg

[Inactive] Angular directive for inserting an SVG file inline within an element.
https://echeung.me/ng-inline-svg/
MIT License
210 stars 88 forks source link

doesn't work with ionic/cordova in android #58

Closed MuhAssar closed 6 years ago

MuhAssar commented 6 years ago

when deploying my ionic app to android using cordova, the svg image doesn't show up, OTOH when using my ionic app in browser it shows so I believe it might be because the app is compiled for android usage or something.

arkon commented 6 years ago

37 might help.

MuhAssar commented 6 years ago

ok I'll try the suggested workaround (adding . or removing the slash) and report back

MuhAssar commented 6 years ago

unfortunatly the issue still exists, I tried all the combinations:

<div class="svg" [inlineSVG]="'./assets/imgs/svg/1.svg'"></div>
<div class="svg" [inlineSVG]="'/assets/imgs/svg/2.svg'"></div>
<div class="svg" [inlineSVG]="'assets/imgs/svg/3.svg'"></div>
<div class="svg" [inlineSVG]="'./www/assets/imgs/svg/4.svg'"></div>
<div class="svg" [inlineSVG]="'/www/assets/imgs/svg/5.svg'"></div>
<div class="svg" [inlineSVG]="'www/assets/imgs/svg/6.svg'"></div>
<div class="svg" [inlineSVG]="'./assets/www/assets/imgs/svg/7.svg'"></div>
<div class="svg" [inlineSVG]="'/assets/www/assets/imgs/svg/8.svg'"></div>
<div class="svg" [inlineSVG]="'assets/www/assets/imgs/svg/9.svg'"></div>

nothings works at all, although assets/www is the root folder inside the android apk package.

as a comparison, I tried to load the svg file using an img tag:

<img src="./assets/imgs/svg/1.svg" />
<img src="/assets/imgs/svg/2.svg" />
<img src="assets/imgs/svg/3.svg" />
<img src="./www/assets/imgs/svg/4.svg" />
<img src="/www/assets/imgs/svg/5.svg" />
<img src="www/assets/imgs/svg/6.svg" />
<img src="./assets/www/assets/imgs/svg/7.svg" />
<img src="/assets/www/assets/imgs/svg/8.svg" />
<img src="assets/www/assets/imgs/svg/9.svg" />

and the first and the third loaded successfully.

MuhAssar commented 6 years ago

yay problem solved!

I used chrome remote debug and found that the root folder is named _androidasset , so I changed the url accordingly and it worked successfully, all these three urls work:

  <div class="svg" [inlineSVG]="'./android_asset/www/assets/imgs/svg/10.svg'"></div>
  <div class="svg" [inlineSVG]="'/android_asset/www/assets/imgs/svg/11.svg'"></div>
  <div class="svg" [inlineSVG]="'android_asset/www/assets/imgs/svg/12.svg'"></div>
arkon commented 6 years ago

Nice! Glad you figured it out.

KasperAndersson commented 6 years ago

Hi @arkon & @abuassar,

Thanks for pointing this out. So deploying to multiple platforms, would mean multiple svg icons?

<div class="svg" [inlineSVG]="'./android_asset/www/assets/imgs/svg/10.svg'" *ngIf="isAndroid"></div>
<div class="svg" [inlineSVG]="'/android_asset/www/assets/imgs/svg/11.svg'" *ngIf="isAndroid"></div>
<div class="svg" [inlineSVG]="'/android_asset/www/assets/imgs/svg/12.svg'" *ngIf="isAndroid"></div>
<div class="svg" [inlineSVG]="'./[IOSFOLDER]/www/assets/imgs/svg/10.svg'" *ngIf="isIOS"></div>
<div class="svg" [inlineSVG]="'/[IOSFOLDER]/www/assets/imgs/svg/11.svg'" *ngIf="isIOS"></div>
<div class="svg" [inlineSVG]="'/[IOSFOLDER]/www/assets/imgs/svg/12.svg'" *ngIf="isIOS"></div>

Correct?

arkon commented 6 years ago

You could probably have a function that returns the URL accordingly instead of doing it like that.

KasperAndersson commented 6 years ago

@arkon Yes, that, of course, would make sense to built into the app, but the idea is right?