I am using the background image in my application in CSS . I am using the following code to get the background image file
background-image: url("Image\GREEN.GIF");
but I am not able to get the Image .. I know that it is path problem .. I can able to get the
absolute path in java using
path=new File("web/CSS/myimage.gif").getAbsolutePath();
but in CSS how to get the absolute path..
please help me in getting the absolute path in CSS
Thanks in Advance
Raj
url("Image\GREEN.GIF")
should be
url("Image/GREEN.GIF")
Relative URLs should work perfectly well in CSS, so you don't need absolute URLs. Just be aware that some URLs are relative to the stylesheet, not the HTML that loads it.
I'm not sure there is a way to get the absolute path via CSS, but can you not use relative paths here?
Say you have the following:
-root
-----css
-----img
In order to then reference your images from you css file, you would simply put a path of
background-image: url("../img/myfile.gif");
Also remember that the item your giving the background image to must have content in it, or set dimensions! Otherwise nothing will show!
You don't need absolute URLs.Normally,the urls in stylesheet are relative to the stylesheet,but if you define the mouse cursor's image,URLs relative to the stylesheet are not supported by IE,you should set the path relative to root path or use absolute path.
Related
I want to change the background image from a scene.
This is from the css file.
.SettingsGrid {
-fx-background-image: url('Background.quiz.jpg');
/*-fx-background: #ffffff;*/
-fx-background-size: cover;
}
I tried using this:
SettingsGrid.setStyle("-fx-background-image: url('Background2.quiz.jpg')");
But instead of the background changing to the new image, it just went white.
Just changing the background colour works.
Try specifying the fully qualified path relative to the root of the classpath.
The resolution path is different depending on whether you access a CSS URL resource from a style sheet or an inline style.
Read the uri documentation in the CSS reference. It is well-written, with clear examples that will help you understand your issue. Quoting from the documentation for CSS URL resolution:
If the address does not have a scheme: component, the address is considered to be the path component only.
A leading / character indicates that the path is relative to the root of the classpath.
If the style appears in a stylesheet and has no leading / character, the path is relative to the base URI of the stylesheet.
If the style appears in an inline style, the path is relative to the root of the classpath (regardless of whether or not there is a leading /).
Example
-fx-background-image: url('Background.quiz.jpg');
When written inside a CSS stylesheet, this will look for an image location in the classpath adjacent to the stylesheet.
When written in an inline style, it will look for an image location in the root of the classpath.
Instead, for the inline style URL, if you specify the full path to the image relative to the root of the classpath, then the image will be found.
If you package your app as a jar, then run jar tvf on the packaged jar, and your image is located, for instance, in the location image/Background2.quiz.jpg, then the URL to use in an inline style would be:
settingsGrid.setStyle("-fx-background-image: url('image/Background2.quiz.jpg')");
Already searched for an answer for this but the only similar question I could find was here (JavaFX background-image works in scenebuilder and win but not on osx) and it hasn't been answered.
I'm trying to get a background image to show when my App runs. I'm using Eclipse, JavaFX and SceneBuilder. I have applied the CSS File to my FXML file. At the minute the background image will only show in SceneBuilder.
CSS Code:
#background {
-fx-background-position: center;
-fx-background-color: #BDBDBD;
-fx-background-image: url('./Background.png');
-fx-background-repeat: stretch;
}
Anyone got any idea on why this is?
P.S. I have already used two different paths to get to the image, both the image file location within my project and the image file location on my laptop.
you can try this code
.background {
-fx-background-position: center;
-fx-background-color: #BDBDBD;
-fx-background-image: url('file:src/Background.png');
-fx-background-repeat: stretch;
}
You can use the Absolute Path from IntelliJ IDEA.
For that simply follow the steps:
Right click on the image from your IntelliJ IDEA directory.
Click on Copy Path/Reference...
Select the Absolute Path. Only clicking on that usually copies the link. But you can also Ctrl + Shift + C to copy the path.
Now simply paste the absolute path to the FXML file in the image source.
Make sure to use an additional slash \ in the directory slashes as it needs to slash to specify that it is part of that address, not any escaping character.
Please keep in mind that these procedures apply only when you have already copied the image file inside the project folder. If you want to use images located in a different directory, then you have to copy the absolute path. If you are using the Windows operating system, you can simply copy the absolute path by right clicking on the image file and going into the properties. The Location section contains the path.
If the Location does not contain the absolute path including the file name then you simply need to add the file name manually.
For example, check the image below.
Here, in this file's properties tab, the file name is not included in the Location section. Therefore, I need to add the filename at the end of the location/path manually.
In this case, my absolute path would be C:\Users\fahim\Pictures\Screenshots\Screenshot_20230221_110058.png.
If I want to use this path in the FXML file, I need to add one more slash there after each slash in the location. Then the path that I will include in my FXML file is this: C:\\Users\\fahim\\Pictures\\Screenshots\\Screenshot_20230221_110058.png.
Also, if you do not use any extra slashes ( \ ), that will also work perfectly!
For example, check the following code.
<image>
<Image url="C:\Users\fahim\Desktop\aoop-uiu\SceneBuilder_01\FirstApp\src\image\background.jpg" />
</image>
I did not use any extra slash ( \ ) in the absolute path now, but it still works like earlier.
I'm doing the letter generation with iText (pdf/rtf) in java servlet and got a problem with accessing images. The images are in the WebContent/images folder. When I run it in a local server and pointing the full path of images directory (c://eclipse/myproject/WebContent/images/letterHead.jpg) its working, but it fails running on the server with the directory ("WebContent/images/letterHead.jpg").
The project is being deployed as a WAR on a tomcat server, thus ending up with an address similar to
http://someserver:8081/projectName/someJSP.jsp
I don't understand how to reference the images relatively in this environment, and any help would be much appreciated.
Here is my code
Image imghead = Image.getInstance("WebContent/images/letterHead.jpg");
imghead.setAbsolutePosition(35,770);
imghead.scaleAbsolute(125, 42);
document.add(imghead);
You should never use relative paths in java.io stuff. You will be dependent on the current working directory which is in no way controllable in case of a webapplication. Always use absolute disk file system paths. Thus, c:/full/path/to/file.ext.
You can use ServletContext#getRealPath() to convert a relative web path to an absolute disk file system path. The relative web path is rooted on the public webcontent folder which is in your case thus /WebContent. So, you need to replace the first line of above code by:
String relativeWebPath = "/images/letterHead.jpg";
String absoluteDiskPath = getServletContext().getRealPath(relativeWebPath);
Image imghead = Image.getInstance(absoluteDiskPath);
// ...
Following piece of code may help you...
String path = request.getContextPath();
String split_path[] = path.split("/");
path = request.getRealPath(split_path[0]);
String imagePath="\\resources\\images\\letterHead.jpg";
Image image = Image.getInstance(path+imagePath);
Following code can be used to access image path inside a java class.
URL imageUrl = getClass().getProtectionDomain().getCodeSource().getLocation();
Image img=Image.getInstance(imageurl+"../../../some/images/pic.gif");
So I had the same problem, I wanted to add an image to the pdf but through a relative path, so when I made a executable program it would work in any computer, even if it had or not the image saved.
I found a way where you add the image as a resource of your application. You need to put the image inside the src directory or the dir of the class where you call it and then you can use the following code:
Image image = Image.getInstance(yourClassName.class.getResource("/yourImageName")));
If you put the image inside a folder then, obviously, you'll need to add the path through the folders name ("folderName/yourImageName"). Hope it helps!
For Kotlin, if the image is in the resources folder, you can also try the following:
Image.getInstance(this::class.java.classLoader.getResourceAsStream("images/your_image.png").readBytes())
Resources
Image foto = Image.getInstance(this.getClass().getResource("/static/img/gobierno.jpg"));
Currently I render my images from my project's "webapp" directory using ContextRelativeResource:
Java:
add(new Image("image", new ContextRelativeResource("image.jpg")));
HTML:
<img wicket:id="image"/>
I would like to know how to display images from given absolute path, for example "C:\image.jpg". Any ideas?
What version of Wicket are you using?
You might want to consider mounting external resources. Go here.
OR use the Image's constructor that takes and ID and a WebResource.
I am trying to add background image to some pane in my javafx application, the image is located inside the package resources.img and the css is located inside the package resources.css
if i setting the background image programmatically like suggested in this thread:
Setting background image by javafx code (not css)
it works fine but i would like to know if i can set the background image from the css file itself.
i tried
-fx-background-image: url("#../img/myImage.png");
but then the css interpreter didn't find the image file.
is it possible to do what i want via css?
JavaFX CSS parser has a limitation like
#-keyword statements are ignored.
described in "Limitations" section of CSS Reference Guide. It may be the cause of your problem though didn't confirm myself. Can you try like this: -fx-background-image: url("../img/myImage.png");
or -fx-background-image: url("resources/img/myImage.png");.
Perhaps someone it will be useful.
If you specified: -fx-background-image: url("resources/img/myImage.png");.
It's possible that standalone .jar file will successfully load the image while IDE(like Eclipse) won't. It because IDE alters path and will search something like: C:/My_project/resources/css/resources/img/myImage.png.
It means root for specified path will folder with css file instead of .jar package