Images not displayed on Android device


#1

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.


#2

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?


#3

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.


#4

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


#5

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


#6

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


#7

thanks worked for me nice 1


#8

Worked for me also! great, Tnx!


#9

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


#10

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 ??


#11

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


#12

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');

#13

Thanks… Its working :slight_smile:


#14

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.


#15

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


#16

work for me too. thanks a lot


#17

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


#18

i have placed my all images here as u can see in 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


#19

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


#20

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


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