1

I have created an app using ionic 2 that looks fine when testing in Chrome. However I uploaded to the client, and tried to view using ionic view -- and all the css and images were missing. I may have the wrong paths, or maybe the assets aren't being uploaded, but not really sure how to debug it. For example, in my index.html page, I have the following link

<link href="/css/ionic.app.css" rel="stylesheet">

This works fine in chrome, but not in ionic view. Also, the image paths are not appearing, for example

<img src="/images/btn_play_again.png" />

This works fine in chrome, but I'm getting a broken image in ionic view. Any idea how to figure this out?

Daryl1976
  • 675
  • 2
  • 8
  • 20
  • I've had the same problem but with building as an `apk` file. Reinstalling `@ionic/app-scripts` fixed this issue for me – Ivar Reukers Dec 22 '16 at 15:17

4 Answers4

2

Make your paths relative instead of absolute. Your local paths are not the same as the app's paths.

Probably it will be just a matter of removing the starting slash:

<link href="css/ionic.app.css" rel="stylesheet">
<img src="images/btn_play_again.png" />
JanP
  • 1,579
  • 2
  • 16
  • 27
2

It seems that your paths are invalid. Please make sure that the following files exist in www directory of your project structure:

css/ionic.app.css
images/btn_play_again.png

If they do not exist then please add them into folder src/assets, which guarantees that both files shall be copied into the folder www after each compilation.

Mete Cantimur
  • 1,371
  • 12
  • 11
  • This works -- I was had to move the images into the src/assets folder and reference therm there as a relative path -- as shown here http://stackoverflow.com/questions/39952214/correct-way-to-use-image-assets-in-ionic-2 . The one thing I still have issues with is referencing images as css backround-images -- url('assets/img/name.png') isn't working – Daryl1976 Dec 23 '16 at 22:33
  • Path should be relative to the generated file **main.css** under the folder **www/build**. Hence the correct path should be **url('../assets/img/name.png')** – Mete Cantimur Dec 24 '16 at 01:04
0

Hard to say why thats happening without seeing your file structure, but I would try to use Ionics directives with respect to the image problems, which could also be part of your href css problems.

<ion-img src="images/btn_play_again.png" />

For the styling, I am not sure why you have that link to begin with. Ionic builds all your scss/sass to build/main.css

<link href="build/main.css" rel="stylesheet">

I would say just re-generate your project using the ionic cli. Dont worry about changing the index.html file. Or show me your file structure.

Pezetter
  • 2,783
  • 2
  • 22
  • 40
-1

From 2.0.0-rc.0 (2016-09-28) release the images are handled in a different way.

1: Place all the images in src/assets/img

2: In the pages HTML file image path would look like <img src="assets/img/someImage.png">

3: In component specific scss file the path will look like url('../assets/img/someImage.png');

While implementing the above DO NOT add platform to your project. If you have already added your platform - please run

ionic platform remove <android or ios >

once the platform is removed - please add platform afresh with

ionic platform add <android or ios >

Now run ionic serve or ionic build <platform> - the compilation process will copy the images into the www folder.

I found a post at https://digitaliq.jimdo.com/ionic-framework/ionic-2/using-images/

This helped me to sort issues.

Arup Bhattacharya
  • 846
  • 9
  • 24