How can I render image with `hidden` element?

[tinnguyen1296]

I have a component (only use to render image) is hidden element, but when I export it, the image rendered with empty content, how can I render image with hidden element

[biiibooo[bot]]

👋 @tinnguyen1296

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[hoppergee]

I met this issue also, and found a solution: Use z-index

[soapwong703]

@hoppergee Can you explain it more? I am facing the same issue but no idea how to use z-index to make it work. Thanks

[hoppergee]

@soapwong703 The reason of the image is not getting rendered is because browsers doesn't render hidden elements. But if we use z-index to do the hidden works instead, (like setting it to a properly value maybe -999), then the image is getting rendered. Hope it's helpful.

[Esteban-Montecinos]

if you are using tailwind the solution for me was to use a div with class 'sr-only' and inside it my element, if you are not using tailwind, sr-only does this: position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0, 0); white-space: nowrap; border-width: 0;

[datsenkoboos]

You can set display to none in your css and then change it directly on render, using style option:

const blob = await toBlob(element, {
  style: {
    display: 'flex',
  },
});

[ajayv1]

Do we have any solution for it? I am only getting blank screen with size 0KB for hidden element.

[Cybersepp]

Do we have any solution for it? I am only getting blank screen with size 0KB for hidden element.

Same