Unclear/buggy where images can be placed

[srad]

Describe the bug

I am looking at at the documentation for image embedding and it is pretty unclear in which cases it is supposed to work and not.

I am using for a complex table layout and especially with that combination, despite I am able to call the .Image() method on pretty much every element, it is only displayed when used in a very specific way.

To Reproduce

For example:

byte[] imageData = File.ReadAllBytes(filePath);
table.Cell().Row(1).Column(2).Element(e => e.Container().Image(imageData));

This makes the entire row disappear, this also doesn't work:

table.Cell().Row(1).Column(2).Image(imageData);

This on the other hand works, but (of course) produces a broken layout:

table.Cell().Row(1).Column(2).Column(col => column.Item().Image(imageData));

Expected behavior

When calling a function on an element breaks something, it should better not have a function call to break something.

The extension helper methods are just too general and you can call them obviously in non-working combinations.

So there are three ways to "fix" this:

1. More specific types for the extension method(s) (at least for .Image()) where you can only call the function on elements which actually work.
2. Fix .Image() extension method, so that it somehow creates the .Column(col => column.Item().Image(imageData)) internally without breaking the table layout and makes the image work.
3. Update the documentation to reflect where you can use .Image() and known issues.

Workaround?

Other than that, I haven't figured out how to make it work with the original layout, which is:

table.Cell().Row(1).Column(2).Image(imageData);

Anybody can explain to me how to make this work?

[girlpunk]

Hi srad,

Unfortunately I wasn't able to reproduce the issues you're describing. Are you able to share a full project that demonstrates the issue?

For reference, this is what I tried to reproduce the issue:

using QuestPDF.Fluent;
using QuestPDF.Helpers;
using QuestPDF.Previewer;

var d = Document.Create(container =>
{
    container.Page(page =>
    {
        page.Size(PageSizes.A4);

        page.Content()
            .Table(table =>
            {
                table.ColumnsDefinition(columns =>
                {
                    columns.RelativeColumn();
                    columns.RelativeColumn();
                    columns.RelativeColumn();
                    columns.RelativeColumn();
                });

                var image1Data = File.ReadAllBytes("985-200x200.jpg");
                table.Cell().Row(1).Column(2).Element(e => e.Container().Image(image1Data));

                var image2Data = File.ReadAllBytes("137-200x200.jpg");
                table.Cell().Row(2).Column(1).Image(image2Data);

                var image3Data = File.ReadAllBytes("972-200x200.jpg");
                // I'm assuming the column in your example was a typo, and should have been col?
                table.Cell().Row(3).Column(4).Column(col => col.Item().Image(image3Data));

                table.Cell().Row(4).Column(3).Image("390-200x200.jpg");

                
            });
    });
});

d.ShowInPreviewer();

Which produced the following:

[MarcinZiabek]

@girlpunk Generally, the Fluent API is precise about places where images could be embedded. There are no specific limitations. However, sometimes the image may introduce size requirements impossible to meet. In such a case, you may want to change its scaling, size, etc.

Without any specific usage examples (image resolutions) and code where it is placed, it is difficult to help more.