media:image
Description
The Image tag displays images from a given field in a result or a src
.
It will automatically resize and cache the image for performance.
The following module will need to be added to your pom.xml in order to use the twigkit image-service.
<dependency> <groupId>twigkit</groupId> <artifactId>twigkit.media</artifactId> <version>${project.parent.version}</version> </dependency>
If your image is within an expression you will need to use the trusted
filter eg (<media:image src="{{imageUrl | trusted}}"></media:image>
)
If you are combining plain text with a variable it is recommend that you do this within a function in a controller. You can see this in the example below. This will remove the chance of getting a 404 in the JavaScript console caused by a request for the image being sent before the values in the src attribute were evaluated.
Example
Controller
$scope.myImageUrl = function(result){ return 'http://placehold.it/' + result.fields.x.val + 'x' + result.fields.y.val; }
View
<media:image src="{{myImageUrl(result) | trusted}}"></media:image
Usage
as element:
<media:image
[result="{object}"]
[field-name="{string}"]
[field-prefix="{string}"]
[field-suffix="{string}"]
[src="{string}"]
[lazy-load="{boolean}"]
[fallback-image-url="{string}"]
[width="{number}"]
[height="{number}"]
[alt="{string}"]
[url="{string}"]
[cache-original="{boolean}"]
[image-service-url="{string}"]
[use-headers="{boolean}"]>
</media:image>
Parameters
Param | Type | Details |
---|---|---|
result (optional) |
object |
The result object the field with the image is coming from. |
field-name (optional) |
string |
The field in the result to obtain the image URL. |
field-prefix (optional) |
string |
If the field contains a relative URL, then prefix it with this value. |
field-suffix (optional) |
string |
If the field contains a relative URL, then append this to that value. |
src (optional) |
string |
Rather than specify a field-name, provide a URL to the desired image. If
you are using an angular expression you will need to add the
#/api/lightning.filter:trusted[trusted filter]. For example,
( |
lazy-load (optional) |
boolean |
Whether the images should be lazy loaded. Lazy loading works best if image size is defined. Default:false. |
fallback-image-url (optional) |
string |
If no image is found, use the fallback URL provided. If no fallback image URL is provided and the image is not found no image will be displayed. |
width (optional) |
number |
Width of the image to resize to. You can specify either width, height or both. |
height (optional) |
number |
Height of the image to resize to. You can specify either width, height or both. |
alt (optional) |
string |
Provide alternative text for the image. |
url (optional) |
string |
Provide a URL to make the image clickable. |
cache-original (optional) |
boolean |
Whether the write the original image (prior to resizing) to cache. Defaults to true. |
image-service-url (optional) |
string |
Specify an alternative URL for the Twigkit Media Module image service. |
use-headers (optional) |
boolean |
Whether to pass HTTP headers to the underlying image service (default: false). |