Broken images from build

[Ahmedht]

Short description of the problem:

When I run the app in the browser using ionic serve or in my device using ionic run, any images I have included in src/assets/images are correctly copied and I can see them with no issue when they’re included on a page. When I build the app using ionic build, however, and run it on my device, the images all show up as broken images. I can’t find anything in documentation about how to correctly include and reference images, so the best I could tell would be to include them in src/assets in an images directory since seemingly everything from assets is included in the build.

What behavior are you expecting?

I am expecting the build to also contain the images and have them correctly show instead of broken images.

Steps to reproduce:

. Start a new tutorial project using:
ionic start Projecttutorial blank --v2

Add a jpeg/png to src/assets/images
Create an image tag in src/pages/home/home.html with the following markup:

Run ionic serve. Notice that the image appears correctly on the page. Build the app using ionic build android or iOS (android is the platform I'm currently using). Load the apk into an android device and install it. Open the application and notice a broken image on the main page. I use the code with different ways and no result with ionic build just in ionic serve i can see't. Code : home.scss : img{ background-image: url('../assets/images/Barcodeicon.png'); }

My system information:

Cordova CLI: 6.4.0
Gulp version: CLI version 3.9.1
Gulp local:
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
ios-deploy version: Not installed
ios-sim version: 5.0.9
OS: Mac OS X Sierra
Node Version: v7.0.0
Xcode version: Xcode 8.1 Build version 8B62

[ChrisGriiffith]

You can either use Chrome’s remote debugging feature to explore the structure and reveal the path, or change the extension from apk to zip, unzip and then inspect the directory structure to make sure you are targeting the path.