3

I made the application build of the ionic 2 sidemenu, however the svg appears in the Chrome but svg does not appear in Android after generate the file android-debug.apk:

enter image description here

Follow the commands I used:

npm install -g ionic cordova ionic start myApp --v2 sidemenu ionic platform add android ionic build android

/myApp/src/pages/page1/page1.html

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>Page One</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>
    <h3>Ionic Menu Starter</h3>
    <img src="../../assets/img/myapp.svg" alt="">
    <p>
        If you get lost, the
        <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
    </p>
    <button ion-button secondary menuToggle>Toggle Menu</button>
</ion-content>

Could you help me solve this problem?

rafaelcb21
  • 12,422
  • 28
  • 62
  • 86

4 Answers4

8

Maybe it is because you use the wrong path, remember when you build an app, you have this:

enter image description here

So the path is need to be "./assets/img/myapp.svg" intread "../../assets/img/myapp.svg" , because in a compiled app you are in the root , it's as if you are loading evething in the index.html file, and it's also works in the browser

JoxieMedina
  • 843
  • 1
  • 13
  • 20
0

You can try to open your apk with a zip tool and check if apk contains image that you give. If so make sure your relative path points image.

Good luck

Emre Aktürk
  • 3,306
  • 2
  • 18
  • 30
  • The svg file is on the following path`/android-debug.apk/assets/www/assets/img/`. If I swap the svg file for a png it works. – rafaelcb21 Dec 04 '16 at 18:33
0

I had same problem that SVG format would not display in ionic 2 on build. My solution is that you need to put svg files into right assets folder, path to that folder is "./assets/img/[file_name]" like JoxieMedina explained why, and I used original html img tag instead of ionic ion-img because ion-img have some styling on default. If you are using ion-img then you will probably need to define width and/or height of an ion-img element to make it visible. Plus, in both cases, with img or ion-img element, I needed to put "backgroun-color: transparent" and define mime type type="image/svg+xml" to make it work. Hope this will help someone.

karlo1zg
  • 180
  • 3
  • 17
0

For me, on HTML I use assets/path/to/file, as using other combinations did not work on Android.

Another reason that it might not work for some is due to path/filename case. I was requesting MyFile.svg but the file was actually myfile.svg.

Carlos P.
  • 102
  • 4