Retrieve Image From Text Database and Display on Button

Question

I would like to ask is retrieving user profile image from UserClass and display the image on a button possible in JavaFX?

I have tried using setStyle to set the image but when I run the program it shows some error.

Here is my FXML controller file

private Button button1;
UserClass user = new UserClass();
public void initialize(URL location, ResourceBundle resources) 
{
   button.setStyle("-fx-background-image:'"+user.Photopath()+"'");
}

Here is my simplified UserClass class code

public class UserClass
{
   private String photopath;
   public String PhotoPath() 
   {
      return "src/Pictures/womanprofile.png";
   }
}

Here is the error log

WARNING: CSS Error parsing '*{-fx-background image:'src/Pictures/womanprofile.png'}:

I think `"-fx-background-image:"+user.Photopath()+"` instead of `"-fx-background-image:"+user.Photopath.+"` — Shekhar Rai, Oct 24 '19 at 05:19
@SherwinChia you need to add `url` in your css -> `{-fx-background image: url(user.Photopath())}` — Shekhar Rai, Oct 24 '19 at 05:38
I would suggest placing the picture in your resource folder or make it relative to a css file and load the css file with the fxml — smac89, Oct 24 '19 at 05:45
@smac89 I store all user profile picture inside one folder (Pictures) located in src — Sherwin Variancia, Oct 24 '19 at 05:47
See [this question](https://stackoverflow.com/questions/16340269/styling-a-javafx-2-button-using-fxml-only-how-to-add-an-image-to-a-button) for other options to put images in buttons. — jewelsea, Oct 24 '19 at 08:13
@jewelsea if i put imageview inside a button and the image have the same size as the button, is the button clickable? — Sherwin Variancia, Oct 24 '19 at 08:32
Buttons are clickable. I wouldn't advise making an imageview the same size as the button, because then you can't see the button to know it is clickable. But normally you don't need to worry about that, you just set the imagview as the graphic in the button and the default button implementation will add padding around the imageview so you can see it is part of a clickable button. — jewelsea, Oct 24 '19 at 08:44
@jewelsea because I’m trying to create a circle button with user profile picture inside the button and if the user click on it, new panel will appear below it(like gmail). Do you have any recommendation? — Sherwin Variancia, Oct 24 '19 at 08:51
You can make round buttons if you want, see for instance [RoundButton.java](https://gist.github.com/jewelsea/3383311), though that particular example is probably more complicated than you actually need here. See also, [this question on round buttons](https://stackoverflow.com/questions/26850828/how-to-make-a-javafx-button-with-circle-shape-of-3xp-diameter). You can set a clip on the image view to make it round so that it fits in the round button nicely. It is all a little non-trivial, but possible. — jewelsea, Oct 24 '19 at 08:55

Shekhar Rai · Answer 1 · 2019-10-24T06:15:15.790

1

You need to add url in your css.

private Button imageButton;

private UserClass userClass = new UserClass();

public void initialize(URL location, ResourceBundle resources) {
   imageButton.setStyle("-fx-background-image: url('"+userClass.PhotoPath()+"')");
}

edited Oct 24 '19 at 06:15

answered Oct 24 '19 at 05:48

Shekhar Rai

2,008
2
22
25

By the way that is my simplified UserClass so the my question is easier to be understand, actually its a class to retrieve user data such as name, id , and profile picture path from text database. I can upload full userclass code if its neccessary. – Sherwin Variancia Oct 24 '19 at 05:53
I have tried your solution! The good news is it show no error. The bad news is the button display no picture. – Sherwin Variancia Oct 24 '19 at 05:56
I have updated the code! And showing no-picture means `invalid-path` of the picture. – Shekhar Rai Oct 24 '19 at 05:57
it says "setStylesetStyle is undefined for the type button" – Sherwin Variancia Oct 24 '19 at 06:06
@SherwinChia `setStylesetStyle`? or `setStyle` ... are you sure that Button is from `javafx.scene.control.Button` ? Maybe your path is not matching - so add `/` on you image path -> `/'src/Pictures/womanprofile.png` – Shekhar Rai Oct 24 '19 at 06:15
setStyle work find without error. My pictures absolute location is E:\Coding\Eclipse Project\OODJ\src\Pictures\womanprofile.png. – Sherwin Variancia Oct 24 '19 at 06:27
the picture is not displaying because the picture is to large – Sherwin Variancia Oct 24 '19 at 07:03

score 0 · Accepted Answer · answered Oct 24 '19 at 07:03

0

You should check if your button size are too small. Hence, it only shows your background transparent image. Try enlarge your button and see how it solve your problem.

answered Oct 24 '19 at 07:03

Richard Tiozard

50
5

Retrieve Image From Text Database and Display on Button

2 Answers2