Images not displayed on Android device

I am using really simple code as below

Above image is present in the default img directory of ionic app.This works fine and i am able to see all images while testing on localhost using browser. However I have uploaded this app and tried checking using ionic View app. I an not getting any of the images on my Android device. what could be the reason ? how can i resolve this issue,

P.S : image path is static and not generated using any angular code.

1 Like

I’m having the same problem when viewing images on my Android device (4.4.4). I’ve also tried running it on the Android Emulator using a different version (4.4.2) without any success.

Likewise I’m referencing a local image stored in myApp/www/img directory:

<img src="../img/greeting.png">

It works fine running it on my localhost, and also when serving it through the Phonegap Developer App.

Anyone come across this and found a resolution?

OK I just found a solution, although it’s a sucky one at that. Android accesses assets by a network-based URI /android_asset/www/… so you need to reference your images via:

<img src="/android_asset/www/img/greeting.png">

My images now appear properly on my android device and emulator. However it makes development and testing on my local browser a pain, as the relative paths to the images are now broken when testing locally on my browser.

If anyone has a better solution I’d love to hear it.

2 Likes

Ohh, need to see images on both local and emulator… Still waiting for solution.

Got the solution. Its using path relative to index.html and not template folder.

So we need use path without…/

src=“img/John_Williams.jpg”

This works both on browser and ionic view

17 Likes

Nice one, and the relative path makes sense now. Working for me too. Thanks for posting.

thanks worked for me nice 1

Worked for me also! great, Tnx!

Hello, i have implemented thesame relative path everybody here has implemented yet mine still not working.
example from my code is .

i have my html file in /www/templates folder and images in /www/images folder.

So [quote=“satish11nov, post:5, topic:19553”]
src=“img/John_Williams.jpg”
[/quote]

will work ??

most definitely not, since the dir’s name is images and you’re referencing img :wink:

Thanks, I wasn’t able to view a background on emulators and devices, It was giving me errors in Safari and Chrome debuggers saying it couldn’t find the image. I have the image stored in www/img/logo.png
I changed my code from this:

<ion-view view-title="MyView" hide-nav-bar="true">
  <ion-content style="
    background-image: url('../img/logo.png');

to the below (without the ../ as you suggested, and the background now displays correctly on both emulators and devices:

<ion-view view-title="MyView" hide-nav-bar="true">
  <ion-content style="
    background-image: url('img/logo.png');

Thanks… Its working :slight_smile:

I am trying to use your code for setting the Background of the ion-content,

<ion-content style="
background-image: url(‘img/background.png’);

But the background is not set, instead if i use the “background” attribute, then in /ionic-lab, i am seeing the background being set for both iOS and Android.

But when i build the project and run on android device, the background is not set !

What is happening here??

Any help is highly appreciated.

In my case the image was not shown in a device and yes in the browser. The motif ended up being the dimensions of the image, it was very large. I reduced them and showed them correctly

1 Like

work for me too. thanks a lot

src=“img/name.org” works for local images, but i can’t get this to work with wordpress images using better images plugin

i have placed my all images here as u can see in image

image

as it is not working on android device but working fine in Chrome debuggers
so what should i do ??? make a new folder with image name or something else ???
plzz suggest

no dude its not working for me
no dude its not working for me

can you show me your code for image ???
working code example is


<img src="assets/icon/test.png />