Image web resources
Use image web resources to make images available for use in Model-driven apps.
There are 5 types of image web resources:
- PNG Format
- JPG Format
- GIF Format
- ICO Format
- Vector Format (SVG)
Vector Format (SVG) web resources were added with the Model-driven apps.
Capabilities of image web resources
With image web resources you can add images where you need them. Common uses include the following:
- Custom entity icons
- Icons for custom Ribbon controls and
- Decorative graphics for entity forms and webpage web resources.
- Background images that are used by CSS web resources.
Use Vector Format (SVG) web resources for any icon presented in the application. Vector images are defined as Scalable Vector Graphics (SVG) an XML-based vector image format. The advantage of vector images over other image web resources is that they scale. You can define one vector image and re-use it rather than provide multiple sizes of images. You will use these in with a new EntityMetadata.IconVectorName property to define the icon for a custom entity instead of the
Limitations of image web resources
Like all web resources, image web resources use the security context. Only licensed users who have the necessary privileges can access them.
Reference an image web resource from a webpage web resource
All web resources can use relative URLs to reference each other. In the following example, for the webpage (HTML) web resource new_/content/contentpage.htm to reference the image web resource new_/Images/image1.png, add the following HTML code to new_/content/contentpage.htm:
<img src="../Images/image1.png" />
Reference an image web resource from a form
Add an image to an entity form
Navigate to the form editor for an entity.
Select where you want to add the image in the form.
On the Insert tab, click Web Resource.
On the General tab, select the web resource image that you want to add.
Specify a name for the web resource. You can also specify a label and alternative text.
On the Formatting tab, you can define:
The number of columns the images should use.
The number of rows the images should use, or if it should automatically expand to use available space.
The size of the image using the following options:
Stretch to fit
Stretch to fit (maintain aspect ratio)
If you select “Specific,” you can enter the desired height and width in pixels.
You must save your changes and publish the form before users can see the image in the form.
Reference an image web resource from a ribbon element or from the Site Map subarea
$webresource: directive to specify a web resource image to use as an icon in the ribbon or in the application navigation using Site Map. The following sample shows how to specify icons for a button in the ribbon.
<Button Id="MyISV.opportunity.form.actions.FlyoutAnchor.Button.1" Image16by16="$webresource:new_/icons/oneIcon16.png" Image32by32="$webresource:new_/icons/oneIcon32.png"/>
$webresource: directive adds a solution dependency that prevents the referenced image web resources from being deleted as long as they are used by another solution component.
Using Web Page (HTML) Web Resources
Using Style Sheet (CSS) Web Resources
Using Script (JScript) Web Resources
Using Data (XML) Web Resources
Using Silverlight (XAP) Web Resources
Using Stylesheet (XSL) Web Resources