Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<img/> support #13

Open
Bobakanoosh opened this issue Mar 26, 2024 · 2 comments
Open

<img/> support #13

Bobakanoosh opened this issue Mar 26, 2024 · 2 comments

Comments

@Bobakanoosh
Copy link

Bobakanoosh commented Mar 26, 2024

Is the <img/> tag going to be supported? I currently use Satori to convert HTML+CSS --> PNG for OG Image purposes, but it's a bit slow. Was moving to this and then realized it doesn't support images.

@chearon
Copy link
Owner

chearon commented Mar 27, 2024

Images aren't supported yet, but that is relatively high on my list.

For the time being if you're up for a little bit of work, you can use a regular div sized to what the image should be, get the area that it occupies, and paint the image there after painting the layout. I just added an example here for how to do that using node-canvas's loadImage [1] and it should look like this:

images-1

Only problem would be if you need content to layer on top of the image, like positioned elements or negative margins.

Hope it works for you and let me know if you run into any issues. The API is still a work-in-progress, and I definitely want to hear about any pain points.

[1] loadImage is for URLs, but there's also an API for loading an image from a buffer.

@Bobakanoosh
Copy link
Author

Awesome that works as a workaround for the time being!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants