Image at

An image at a fixed place on the page, in a layer. It is the img of the layout, placed by x and y.

The image must be declared in assets before use, with a src file path or bytes you load on the engine (see Installation).

Attributes

Attribute	Type	Default	Description
name	string	—	Required. Asset name declared in assets
x	signed pt	—	X of the left edge of the image’s box (or offset from anchor)
y	signed pt	—	Y of the top edge of the image’s box (or offset from anchor)
anchor	string	—	Reference point: when set, x and y are offsets, and the box’s matching point is placed there
width	pt	—	Width. At least one of width and height is required
height	pt	—	Height
data-if	string	—	Draw only when the value at the path is truthy
data-if-not	string	—	Draw only when the value at the path is falsy

Either anchor or both x and y must be provided.

One size or both

An image needs width or height. Without either the engine stops with an error: the size on a fixed page must not depend on the resolution of the image file.

• One size given: the other follows the image’s proportions.
• Both given: they are a maximum. The image is never stretched: it takes the largest size that fits in them, with its own proportions, and its box becomes that size. anchor places that box, so a logo anchored top-right hugs the corner whatever its proportions.

Logo on every page (top-right corner)

XML

<lpdf version="1">
  <assets>
    <image name="logo" src="logo.png"/>
  </assets>
  <document size="letter">
    <section>
      <layer page="each">
        <img-at name="logo" anchor="top-right" x="-18pt" y="18pt" width="80pt" height="24pt"/>
      </layer>
      <layout margin="48pt">
        <text>Main content</text>
      </layout>
    </section>
  </document>
</lpdf>

Node.js

L.document({ size: 'letter', assets: { images: [{ name: 'logo', src: 'logo.png' }] } }, [
    L.section(NoAttr, [
        L.layer({ page: 'each' }, [
            L.imgAt({ name: 'logo', anchor: 'top-right', x: '-18pt', y: '18pt', width: '80pt', height: '24pt' }),
        ]),
        L.layout({ margin: '48pt' }, [
            L.text(NoAttr, ['Main content']),
        ]),
    ]),
])

Python

L.document(DocumentAttr(size='letter', assets=DocumentAssets(images=[ImageAttr(name='logo', src='logo.png')])), [
    L.section(NoAttr, [
        L.layer(LayerAttr(page='each'), [
            L.img_at(ImgAtAttr(name='logo', anchor='top-right', x='-18pt', y='18pt', width='80pt', height='24pt'))
        ]),
        L.layout(LayoutAttr(margin='48pt'), [
            L.text(NoAttr, ['Main content'])
        ])
    ])
])

PHP

L::document(new DocumentAttr(size: 'letter', assets: new DocumentAssets(images: [new ImageAttr(name: 'logo', src: 'logo.png')])), [
    L::section(NoAttr, [
        L::layer(new LayerAttr(page: 'each'), [
            L::imgAt(new ImgAtAttr(name: 'logo', anchor: 'top-right', x: '-18pt', y: '18pt', width: '80pt', height: '24pt')),
        ]),
        L::layout(new LayoutAttr(margin: '48pt'), [
            L::text(NoAttr, ['Main content']),
        ]),
    ]),
])

.NET

L.Document(new() { Size = "letter", Assets = new DocumentAssets(Images: [new ImageAttr { Name = "logo", Src = "logo.png" }]) }, [
    L.Section(NoAttr, [
        L.Layer(new() { Page = "each" }, [
            L.ImgAt(new() { Name = "logo", Anchor = "top-right", X = "-18pt", Y = "18pt", Width = "80pt", Height = "24pt" }),
        ]),
        L.Layout(new() { Margin = "48pt" }, [
            L.Text(NoAttr, ["Main content"]),
        ]),
    ]),
])

Centered watermark image

XML

<layer page="each" opacity="0.08">
  <img-at name="watermark" anchor="center" width="300pt" height="300pt"/>
</layer>

Node.js

L.layer({ page: 'each', opacity: '0.08' }, [
    L.imgAt({ name: 'watermark', anchor: 'center', width: '300pt', height: '300pt' }),
])

Python

L.layer(LayerAttr(page='each', opacity='0.08'), [
    L.img_at(ImgAtAttr(name='watermark', anchor='center', width='300pt', height='300pt'))
])

PHP

L::layer(new LayerAttr(page: 'each', opacity: '0.08'), [
    L::imgAt(new ImgAtAttr(name: 'watermark', anchor: 'center', width: '300pt', height: '300pt')),
])

.NET

L.Layer(new() { Page = "each", Opacity = "0.08" }, [
    L.ImgAt(new() { Name = "watermark", Anchor = "center", Width = "300pt", Height = "300pt" }),
])