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.