Image
Image from a promotion
Overview
Image
The image will render different images based on the parent container the element is placed in. Each promotion from the BAM api is served with a variety of images, all with different sizes. The component will compare the aspect ratio of container and compare it to the included images and choose the image that fits the closest. The image is optimally served with a srcSet, so the full size will not be requested at smaller screen sizes. If multiple promotions are returned, the image will rotate through promotions by default. Pass the prop rotate="false" to prevent this behavior.
Possible Image Sizes
| Image Type | ID | Width | Height | Aspect Ratio |
|---|---|---|---|---|
| Ad Server | 5 | 303 | 154 | 1.97:1 |
| Mobile Banner | 7 | 1000 | 400 | 2.5:1 |
| App Game Page Ad | 8 | 375 | 50 | 7.5:1 |
| Pro Tab Slim Ad | 38 | 375 | 50 | 9.375: 1 |
| Desktop banner | 6 | 3200 | 280 | 13.4:1 |
| GAM_mobile_banner | 104 | 320 | 50 | 6.4 |
// custom defined tag
<bam-image
property-id="1"
placement-id="1"
context="context">
</bam-image>
SSR AvailableThis component is available for server side rendering.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
context | context | string | undefined | |
ctaType | cta-type | string | undefined | |
defer | defer | boolean | undefined | |
devMode | dev-mode | boolean | false | |
deviceType | device-type | "android" | "desktop" | "ios" | "mobile" | undefined | |
gameId | game-id | number | undefined | |
isBetsyncUser | is-betsync-user | boolean | undefined | |
isMobile | is-mobile | boolean | undefined | |
league | league | string | undefined | |
location | location | string | undefined | |
pageSlug | page-slug | string | undefined | |
placementId | placement-id | number | undefined | |
propertyId | property-id | number | undefined | |
rotate | rotate | boolean | true | |
rotateTime | rotate-time | number | DEFAULT_ROTATE_TIME | |
subdivision | subdivision | number | undefined | |
subscriptionTier | subscription-tier | 0 | 1 | 2 | 3 | undefined | |
timeLimit | time-limit | number | 0 | |
type | type | This can tell the component to try to render a specific type image. | string | null |
wasPro | was-pro | boolean | undefined |