No images are shown using the IMG tag, but working with CSS

Ionic Framework ionic-v3
1

Hi Ionic lovers :slight_smile:

I’m fighting with ionic since two weeks. I’m trying to display images in my android app but, since a while I can’t :cry:

Many weeks before, the images were properly shown. After updating my project, I could not handle images using the img tag.

For example, if I use this :

<img src="assets/img/image-header-home.jpg"/>

The image is not shown with in the androïd app (it does with ionic serve). But it’s working if I’m using CSS :

background-image: url('../assets/img/image-header-home.jpg');

I saw with chrome inspect that I have errors :

Error: Cannot match any routes. URL Segment: 'android_asset/www

ERROR SyntaxError: Unexpected token } in JSON at position 11628

Failed to load resource: net::ERR_FILE_NOT_FOUND

I tryed to solve them but i don’t really understand the errors themselves.

My configuration :

cli packages: (C:\Users\BUNLON\Documents\IonicProject\digiteal\node_modules)

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.0.1

System:

Android SDK Tools : 26.0.2
Node              : v6.10.3
npm               : 3.10.10
OS                : Windows 10

I would be glad If someone could help me :slight_smile:

thanks !

2

imo, it would be “…/…/assets/<…>”, 2 levels up than just 1
hope it helps!

fyi, I’m in a contrary situation
images from scss styles could not be loaded in built apk file (I’m only developing for Android for now)
but of course, both ways work fine when run with live reload

3

I solved my problem, a code line was the problem, in the config I reseted the root element with .forRoot() (was working on deeplinks)

I deleted this line and everything worked fine :slight_smile:

I faced your problem too, did you try to update ionic cli ?

Thanks for the answer anyway !

4

It turns out that the image paths should be according to the www directory structure,
where built files lie inside the build sub-directory
which means all assets shall be loaded with only 1 level up, like yours in the first place!

I thought it’d not be simple as that

case solved! :slight_smile:

ps: but clearly I have no idea why 2 levels up still works fine while live loading…

5

Ok I thought your images wasn’t caught by graddle :slight_smile:

Using ionic serve you serve files as a basic server, so the file structure might be different from a webView app :slight_smile:

1 Like