Skip to content

Satori does not generate the image in this code match the browser-rendered HTML output. #641

Open
@YujinLu4

Description

@YujinLu4

Bug report

Description / Observed Behavior

I use ImageResponse from next/js to generate a image. Satori does not generate the image in this code match the browser-rendered HTML output.

Expected Behavior

Got a rendered svg.

Reproduction

The PNG is not the same as I expected.

new ImageResponse(
      (
        <div
          style={{
            width: "1200px",
            height: "630px",
            padding: "80px",
            display: "flex",
            background: "linear-gradient(35deg,#68E5DE, #03A8FF)",
          }}
        >
          <p>
            <span
              style={{
                fontSize: "60px",
                lineHeight: "100px",
                backgroundColor: "white",
              }}
            >
              Lorem ipsum dolor sit amet, consectetur adipiscin elit, sed do
              eiusmod tempor incididunt
            </span>
          </p>
        </div>
      ),
      {
        fonts: [
          {
            name: "Klavika",
            data: await klavika,
            style: "normal",
            weight: 600,
          },
        ],
        width: 1200,
        height: 630,
      },
    );

Additional Context

what I want:
Screenshot 2024-10-07 at 2 33 35 PM

what I got:
fromImageResponse

Node.js v20.11.0. next/js v14.2.6

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions