Can't load images on devices

ionic-v1
1

So I am fairly new to mobile development, but I can’t seem to find out why when I run the emulators or run the app on my device it fails to load images. If I inspect it, I see the following message: Failed to load resource file:///img/PBOmed_logo.png. It works just fine using ionic serve but not on the devices or emulators. I have verified the file is getting copied to the platforms’ build directories. Am I missing some permission or something? I don’t understand why it loads the scripts just fine but not the images. I am trying to show the images using css like this:

.loginLogo{
	width: 680px;
	height: 180px;
	background: url("/img/PBOmed_logo.png") no-repeat;
	display: inline-block;
}
2

Where are you writing css code??

3

Just in the css file ionic creates when you create a project from a template (I did the tabs template), css/style.css. The app accepts the styles just fine, but can’t find the images specified in the css for some reason.

4

Try …

background: url(“img/PBOmed_logo.png”) no-repeat;

Can you create code pane?

5

Sorry, I’m somewhat of a noob to forums. What is a code pane? And when I remove the preceeding slash in the url it breaks the browser images too. Still doesn’t work on the devices.

6

One thing I haven’t tried is doing a pure relative path from the css to my images. something like

background: url("../img/PBOmed_logo.png") no-repeat

Theoretically that should work in the browser and on the device right?

7

If you are writing css code in style.css. Then it should work…

1 Like
8

Thanks, I’ll give it a shot when I get the chance.

9

I think it might be related problem that I am having that I can not use for css background images…

Take a look at the thread that I postsed…