Ionic-app-scripts: Broken images from build

[johnbwoodruff]

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:

1. Start a new tutorial project using:

ionic start MyIonic2Project tutorial --v2

1. Add a jpeg/png to src/assets/images
2. Create an image tag in src/pages/hello-ionic/hello-ionic.html with the following markup:

<img src="../../assets/images/{IMAGE_HERE}.jpg" alt="placeholder">

1. Run ionic serve. Notice that the image appears correctly on the page.
2. Build the app using ionic build android (android is the platform I'm currently using).
3. Load the apk into an android device and install it. Open the application and notice a broken image on the main page.

Which @ionic/app-scripts version are you using?

Version: 0.0.36

[dudeofawesome]

I'm having this issue with some images. 2 of the 3 images that I have included in my /src/assets/img get messed up during the build process (for both Android and Browser). They both appear fine with ionic serve.

The images are a mix of PNGs and JPGs.

The images lose a bunch of rows of pixels, like this:

Note how the image is mostly transparent (missing pixels), even though it's JPG.

[jgw96]

Hello all, thanks for using Ionic! Unfortunately I cannot reproduce this issue. Would you mind posting a repo I can use to reproduce this issue? Also, what version of Android are you all testing with?

[johnbwoodruff]

@jgw96 Here is the repo that follows the same steps I performed above: https://github.com/jbw91/ionic-images-bug

[royipressburger]

I can confirm that when running the app on a device with ionic run the assets file are not found at all

[comfortme]

when referencing images use it like this,
<img src="assets/images/{IMAGE_HERE}.jpg" alt="placeholder">

[johnbwoodruff]

@comfortme gave me the solution I missed. I was referencing relative to the file, when apparently I need to reference relative from assets. Couldn't find instructions on images anywhere in the documentation so this is good to know. Maybe there should be a section in the documentation specifically with regards to referencing app assets? (or maybe there is and I missed it)

[AhmedHadjTaieb]

I have the same problem I can't see the image on the page when I test the build ionic app, but if I use ionic serve the image appears correctly on the page.
I use the code with two different ways and no result with ionic build just in ionic serve i can see't.
Code :

// page.html :
<div style="text-align: center" >   
<img  src="../assets/images/Barcodeicon.png"  (click)="click()" >
</div>
OR
//pgae.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

[royipressburger]

For me using image path like ./assets/images/image.png worked for me on device and on serve

[AhmedHadjTaieb]

Thank for your help it works correctly.

Le 1 déc. 2016 à 08:31, Royi Pressburger <[email protected] [e-mail]> a écrit :

For me using image path like ./assets/images/image.png worked for me on device and on serve

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub https://github.com/driftyco/ionic-app-scripts/issues/221#issuecomment-264098457, or mute the thread https://github.com/notifications/unsubscribe-auth/AVvi3LqDv0u2QAZ_egdZokHz8FhET3s0ks5rDnfRgaJpZM4KeZKJ.

---

Ahmed Hadj Taieb
Tunisia , Sfax
tél : [phone]

Linkedin : https://tn.linkedin.com/pub/ahmed-ht/72/6a5/334 https://tn.linkedin.com/pub/ahmed-ht/72/6a5/334

[AhmedHadjTaieb]

Hello,
How can I recuperate data from FirebaseListObservable and stocked in table String ?
(ioinic 2 + firebase 3)

thanks

---

Ahmed Hadj Taieb
Tunisia , Sfax
tél : [phone]

Linkedin : https://tn.linkedin.com/pub/ahmed-ht/72/6a5/334 https://tn.linkedin.com/pub/ahmed-ht/72/6a5/334

[kazoo135]

Thanks a million royipressburger
I was having the same issue and your solution worked for me.

[ghost]

Nothing worked... this is very disappointing...

[erperejildo]

Having this css: background-image: url('/assets/images/board.png');
I can see the image working locally but not on my app on production:
https://play.google.com/store/apps/details?id=mind.your.maths

[renjithspace]

SOLVED

1. Add your images to src/assets/imgs directory

2. Set image path in HTML like
   <img src="assets/imgs/example.jpg">

3. Set image path in SCSS like
   background-image: url(../assets/imgs/example.jpg);

It will work browser, emulator and build

[aec4444]

anyone have a solution?

I've done (I've coded originally) it the way given in renjithvk's solution but it does not work.

[komendantaa]

I think the thing is in build hierarchy. If you look into "www" folder, for example, you will see hierarchy like :
www/ for index.html
www/build for main.css
www/assets/imgs/ for img.png

So, if you attaching img via src in html, you may writing path like this "assets/imgs/img.png"

As for background image, you need writing path like this url(../assets/imgs/img.png), because css file placed in www/build

I checked this on android device - all ok.

[LindokuhleProHlubi]

Please help i have the same problem

[torsorensen]

Also experiencing some of my images not loading in prod builds, but were working on ionic serve.
In my case, there was a "cached" version of an image with the same name but different capitalization in the www/assets/imgs/... folder.

So a mismatch like this one:

www/assets/imgs/.. (cached)

• Picture1.png

src/assets/imgs/...

• picture1.png

The solution was to remove the generated file www/assets/imgs/Picture.png and do a new prod build. And I guess one can just get rid of the whole www folder and let it be rebuilt