Ionic 3 IOS App Missing Image

Specifying image on Ionic 3 IOS App is as simple as using html element <img>. This usually works pretty well when testing on web browser.

However, when testing Ionic 3 IOS App on Mac’s Simulator (Emulator), it show missing image instead:

Screen Shot 2018-04-29 at 11.59.23 PM

Simply change relative path of src attribute to absolute path.

Relative path:

<img src="../assets/image/picture.jpg" />

Absolute path:

<img src="/../assets/image/picture.jpg" />

This is caused by how Ionic structured compiled code in build folder. Take a look at here:

Screen Shot 2018-04-30 at 12.09.16 AM