The Image component provides a way to add an image, such as a
JPEG, GIF, or PNG file, to a Visual Web JSF page.
When you drop the image on your page in the Visual Designer, you see a simple box with the word Image in it. If you right-click this box and choose Set Image, you see a dialog box that you can use to specify the image in three ways:
url
property to /resources/image-file
.url
property to the URL you entered.icon
property to the icon name you chose.
url
property has already been set, choosing an icon does not change the appearance of the component, because the url
property takes precedence over the icon
property. For the icon to be visible, the url
property must not be set.
Another way to add an image to your page is to drag its file node from a file explorer dialog to your page. For example, if you open the Microsoft Windows File Explorer and navigate to a GIF image, you can drag its node to your page and drop the image file where you want it to appear on the page. The IDE adds the file to your resources
directory, which you can see under the project-name > Web Pages folder in the
After dropping the component on your page, you can select the component and edit its properties in the Image component's Properties window. If necessary, right-click the component and choose Properties to display the Properties window. In addition to the properties described above that specify the image to be displayed, some typical properties you might set are:
id
attribute. In the page bean, this property's value is
the name of the Image
object.alt
of the <img>
tag.You can also right-click the component and choose one of the following options:
url
property to a data provider or to an object that supplies its value so you can update the image dynamically. For more information, see Bind to Data Dialog Box.url
property specifies an image in a file or at a URL on the Web.The icon
property specifies an icon in the default theme.url
to other objects
or properties that update this component's properties
automatically.