I'm developing an Ionic 3 application. it has some custom styling done, and some images are instantiated via scss as backgrounds.
Thing is, when I run it on local (ionic serve) it works just fine.
But when I build an apk and run it on my phone, images are gone.
I've debugged it, and turns that image files are there, but there's no image on them.
Here's a piece of scss:
&:nth-child(3) {
border-right:none;
padding-top: 28px;
background: url('../../../assets/imgs/tabs/more-tab.png') no-repeat center 4px;
background-size: 20px 20px;
}
When I inspect the app from chrome, I can see the image file on sources tab. But there's no preview for it.
I have been researching a bit, and found only relative/absolute path workarounds (Which none worked). Actually, if I change the image path, it's not even loaded inside the apk.
Any idea why this is happening?
I leverage a background image in the app.scss and below works for me on web/ios/android. I think the relative paths are supposed to be in relation to the the output structure of www/build (not the code directory structure). So maybe try with just 1 ../
background: url("../assets/img/truck.png") no-repeat;
So, turns thatin order to load images both with ionic serve and on a build, image path has to be like this:
../assets/path-to-image
Hope this helps someone else
Related
I've set a custom class .categories e in my Ionic2 app in order to style it with a custom background. The CSS for the background is:
.categories {
background: url('../../assets/img/dark.jpg');
background-size: cover;
}
Everything works just fine in Chrome (using ionic serve), but when I build and run on device, all I see is a plain white background.
I've tried adjusting the path for the background image to assets/img/dark.jpg but no luck. If anyone could possibly help me I'll appreciate your help.
Thank you in advance
alright i think all what you have to do is to change the URL to
background-image: url('../assets/img/dark.jpg');
Background information on the background-image problem
Ionic seems to take all your scss-files, transpile and merge them into one giant css-file
(main.css) which is stored in the {project}/www/build/ directory.
If your background images originally reside in the {project}/src/assets/img/ directory, they are copied to {project}/www/assets/img/.
So regardless of where, or how deep, in the src directory tree your source scss-files are (commonly {project}/src/pages/{pagename}/{pagename}.scss) you need to consider that the paths of referenced images need to be relative to the build directory, not the directory of your scss-file.
When testing the app on a desktop browser using >ionic lab, absolute paths will also work, for example:
background-image: url('/assets/img/dark.jpg');
But in my experience this will not work on actual devices nor in emulators. So don't use it.
As Bouzafour Mohamed mentioned, you need to use the following format to reference your background image.
background-image: url('../assets/img/dark.jpg);
Link will be not like you used
it has to be like relative path to your file
such as your file is on
src > pages > example >example.scss
then you must use image path as
.categories {
background: url('../../assets/img/dark.jpg');
background-size: cover;
}
i am having a ionic 3 angular app and using the background as follows:
app.scss
ion-content{
background-image: url('/assets/images/dummy_bg.jpg');
}
this works fine when i see it in desktop browser. however, it does not render the background image on the iphone when i deploy it.
what could be the issue? i have made sure the size for my iphone 7 plus is 1242*2208
do i need to do something else to get it working?
You can use below code to execute in server because of path problem :
background-image: url('assets/images/dummy_bg.jpg');
or
background-image: url('../assets/images/dummy_bg.jpg');
Just remove the forward slash in the url:
background-image: url('assets/images/dummy_bg.jpg');
I have just installed a new Ionic project - Ionic v2.0.0-beta.32
Im looking to add a background image to the home page of the fresh install, is there anyone that could show me how i go about this? All i can find is information for Ionic 1 and things seems quite different.
From what ive found, the image needs to be the following dimensions
2800px x 2800px
But apart from that i cant find any other tutorials.
This is my first Ionic project so be gentle
Thanks you guys
The image can be any size.
go to app/theme/app.core.scss and add the following code
ion-content{
background-image: url('img/background.jpg');
}
This is assuming that the name of your image file is background.jpg and is stored in www/img/ folder.
Hope this helps
UPDATE Ionic 3.x
Go to app/app.scss and add the following code
ion-content {
background-image: url('assets/img/background.jpg');
}
This is assuming that the name of your image file is background.jpg and is stored in assets/img folder.
For Ionic V4 they use some new switch in the scss file. This worked for me:
ion-content {
--background: url('../../assets/Welcome-screen.png') no-repeat 50% 10%;
}
In ionic 2 the background image work only if you put the img folder into the build folder. If you go to inspect on the mage url it will show you that i finding for it in build/img/bg.jpg try to put folder img into build folder.
www/build/img
I am just getting started with Ionic 2. I have created an img file in app inside it is a file logo.png. So I have created the following code:
css:
.getting-started {
.logo {
background-image: url(./img/logo.png);
}
}
html:
<ion-col offset-33 width-33 class="logo"><h1>Logo</h1></ion-col>
<h3>Welcome to your first Ionic app!</h3>
</ion-content>
I know the css is working, as if I toggle the background color, I get the expected results. However, I don't get any background image, just the Logo text specified. Where should I have put the image file?
EDIT: As of Ionic 2 RC 0, the correct place to put your images is in src/assets/img/ and the correct code to reference the image is <img src="assets/img/myImg.png">. Please see Ionic's change log for RC0 (specifically #28).
As of right now, using the official Drifty Co. Ionic 2 Conference App as a reference, images should be placed inside of the www/ directory.
In my current Ionic 2 app, an image is located at www/img/logo.png and it is referenced in app/pages/page_name/page_name.html as <img src='img/logo.png'> and it works like a charm.
Currently using:
ionic-angular v2.0.0-beta.6 (package.json)
ionic-native ^1.1.0 (package.json)
ionic-cli v 2.0.0-beta.25 (installed CLI)
Using Ionic 2 beta 6, I handled this with a simple gulp task. I dropped my images in app/assets/images (this path is completely arbitrary). Then, I added the following task to gulpfile.js:
gulp.task("assets", function() {
return gulp.src(["app/assets/images/*"])
.pipe(gulp.dest("www/build/images"));
});
You'll also need to update the watch and build tasks to include the new assets task in their calls to runSequence(). I don't believe the order of tasks in the sequence matters, in this case:
gulp.task("build", ["clean"], function(done) {
runSequence(
["sass", "html", "fonts", "assets", "scripts"],
function() {
buildBrowserify().on("end", done);
}
);
});
If you output your images to the same path as I did, then you would reference your images in CSS from ../images/image-name.png and in <img> tags from build/images/image-name.png. I have confirmed that these images are visible both from the browser and an Android device. I don't think it should be any different for iOS.
The assets folder is the correct folder to place any media.
The location of my image:
fyi: if you dont have the folder, just create it
src > assets > img > background.png
variables.scss
.backgroundImage {
background-image: url('../assets/img/background.png');
}
Then on the page I want to use it on:
home.html
<ion-content padding class="backgroundImage">
</ion-content>
You can also reference images the following way:
home.html
<ion-content padding class="backgroundImage">
<img src="./assets/img/background.png" width="50%" />
</ion-content>
www\lib\ionic inside ionic create one folder img
now your path
www\lib\ionic\img put your background image inside this img folder and in your
www\lib\ionic\css\ionic.css
inside ionic.css find .view-container class and past this line.
.view-container {
background: url("../img/main_bg.jpg") repeat scroll 0 0 / 100% 100%;
}
OK, so I found the answer on the IONIC forum. The images go in www/img, the paths to these is then:
url('../../img/appicon.png')
when referenced from css or html in a page folder which is in pages in app.
Hope this helps anyone in the future.
I was having same problem, I found a way, I don't know if is the best way, but it's work.
the images must go on a file sibling to build, inside folder www
www
build
img
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 apk
I could not manage to make it work using a PNG file. It worked in the browser but when I build the app and deployed to a device it did not displayed.
Instead of fiddling with the Gulp file to understand what was going on, I figured out a simpler workaround :
Inline the image into your HTML (or CSS) using a Data URI.
There are many tools online such as this one that will convert your PNG to a Base64 data URI.
If your image is pool.jpg. Place it in /src/assets/img/pool.jpg
It needs to be in this directory (assets) as it is your source from where everything gets built.
Then stop your ionic serve command (Ctrl-C) or whatever you use.
Then delete EVERYTHING under www directory (it all gets rebuilt anyway).
Then restart your server by running 'ionic serve' again.
This will rebuild the directory with the images.
You can reference the image as background-image: url('../assets/img/pool.jpg');
in your code.
I am using ionic 3 and it's a shame it doesn't pick up changes in the assets directory. IONIC should look at this.
I 'm currently on ionic version 3.6 and I had to use this to work:
src="../../assets/img/myImage.jpg"
The path assets/img/myImage didn't work for me
I hope this helps
Hi Guys i found a method add images to ionic v2
Create a images folder in "www" directory (www/images/) and add your all images in this path.
Then give your image path like this
ex: for pages
src="images/logo.png"
in CSS
.ThemeColor{ background: url(/images/bg.png)};
That's it, works for me..
Thanks
I want to create a section with a background covering it in a mobile web page, so I was using the following CSS code:
#section1{
background: url("background1.png") auto 749px;
height: 749px;
}
The background is showing correctly on Android (Chrome, Firefox ...), but it is not showing at all on iPhone or iPad (Safari, Chrome iOS ...). I have tried to set these properties using jQuery when the DOM is ready, but no luck. I read that the size might be a problem, but the image is about 700kB (1124x749px) so it should accomplish the Safari Web Content Guide rules. Which is the problem?
My problem was that iOS doesn't support background-attachment: fixed. Removing that line made the image appear.
It looks like there are workarounds for a fixed background image though: How to replicate background-attachment fixed on iOS
There's a problem with your CSS rule:
Your using the shorthand notation in which the background-size-property comes after the background-position-property and it must be separated by a /.
What you're trying to do is to set the position, but it will fail as auto is not a valid value for it.
To get it to work in shorthand notation it has to look like this:
background: url([URL]) 0 0 / auto 749px;
Also note that there's a value called cover, which may be suitable and more flexible here:
background: url([URL]) 0 0 / cover;
The support for background-size in the shorthand notation is also not very broad, as it's supported in Firefox 18+, Chrome 21+, IE9+ and Opera. It is not supported in Safari at all. Regarding this, I would suggest to always use:
background: url("background1.png");
background-size: auto 749px; /* or cover */
Here are a few examples and a demo, to demonstrate that behavior. You'll see that Firefox for example shows every image except the fist one. Safari on the other hand shows only the last.
CSS
section {
width: 200px;
height: 100px;
border: 1px solid grey;
}
#section1 {
background: url(http://placehold.it/350x150) auto 100px;
}
#section2 {
background: url(http://placehold.it/350x150) 0 0 / auto 100px;
}
#section3 {
background: url(http://placehold.it/350x150) 0 0 / cover;
}
#section4 {
background: url(http://placehold.it/350x150) 0 0;
background-size: cover;
}
Demo
Try before buy
Further reading
MDN CSS reference "background"
MDN CSS reference "background-size"
<'background-size'>
See background-size.
This property must be specified after background-position, separated with the '/' character.
I hope this will help someone in despair.
In my case, it was the size of the image that was too big, so the iPad just wasn't loading it (and it was right actually).
Diminishing its size and quality solved the loading issue.
The problem was not solved when I tried to use properly the background in shorthand. It works when I split the background property:
#section1{
background: url("background1.png");
background-size: auto 749px;
height: 749px;
}
Reduce the image size if nothing else works -- iOS doesn't like large image sizes on mobile and simply won't display the image if it's too large.
Great fundamentals by #insertusernamehere! No matter what I did I couldn't get my image to show up...until, I went back to basics. The image size was too large and iPhone didn't like loading an image of that size, over 700kbs. So, I reduced it to 32kb and we were in action.
Background image disappears on the IOS Browser (iPhone/iPad).
This is the code i used:
/*CSS*/
.bg-image {
background: url([URL]) center/cover no-repeat;
}
Alternatively, img src works on all browsers. It adds the Background Images acc to devices resolution.
<div class="download">
<picture>
<source srcset="/images/ios-device-mobile-v2.png" media="(max-width:450px)"/>
<source srcset="/images/ios-device-mobile-v2.png" media="(min-width: 600px)"/>
<img src="/images/ios-device.png" class="imgright">
</picture>
</div>
This piece of code is tested on iPhone Safari, Android Chrome and web Safari. Hopefully, This will help.
background-attachment: fixed; is not supported by IOS.
You can fix this by keeping the image in the div and positioning the div.
Hope this will work.
I had an negative text-indent that was throwing my background image off the page, so color:Transparent it is then.
I didn't see anyone specifically say this, but you have to define the width too. Makes since, since I set the background size to "contain" - it has to know what the container's dimensions are.
Once I did, the background rendered as expected.
#media only screen and (max-width:599px) {
[id=banner] td { width:480px !important; height:223px !important; background:url('image') no-repeat 0 0 !important; }
}
#media only screen and (max-width:479px) {
[id=banner] td { width:320px !important; height:149px !important; background:url('image') no-repeat 0 0 !important; background-size:contain !important; }
}
Note: The background URL needs to be defined for both breakpoints so that it works for iPhone 5 (iOS7).
Add a background-color solved my problem
background-color: #F4F4F2;
I had to set input { opacity: 0; } for my input + span {} icon to show up.
I don't have a real solution/reason for my similar issue but my background-image PNG image simply wouldn't show up until I moved it to a new folder in my (Cordova) iPad app. I literally moved it from /css/images/sweden/myimage.png to /css/images/sv/myimage.png and it started working. The other odd thing is that ALL other images in the original folder work fine (as background-image). Super strange. If I find the true reason/fix I'll report back.
I tried resizing my background image, made it way too small to test the theory, but it still wouldn’t show on any browser on the iPad (and presumably an iPhone). Tried other solutions that are listed here – still no good. Then I noticed that the element had inherited display: table;. Added display: block; to override that and the background image now displays on all divices that I've tested it on.
It's an old issue, i would like to share my solution here. iOS bigger image than the dimension ignores rendering, please use appropriate use size, not the css height/width. The actual image should not be more than 150% larger in size than the rendering viewpoint.