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

fix for dynamic image render #2465

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

Justinio99
Copy link

There are ongoing challenges with dynamically rendering the component. The primary issue identified was the absence of image properties on the child node. To rectify this, I introduced a new validation step for the Image type, ensuring the creation of a new node instance with the appropriate attributes.

  if (isImage(element)) {
    const node = { props, type, style, box: {} };
    await fetchImage(node);
    return [node];
  }

To facilitate this solution, I needed to modify several functions to execute asynchronously, particularly because fetchImage was already an asynchronous function.

As my expertise with react-pdf is limited, I'm hopeful that this solution proves effective. I'm more than open to feedback and help in this area.

Copy link

changeset-bot bot commented Dec 19, 2023

🦋 Changeset detected

Latest commit: 5c2d111

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages
Name Type
@react-pdf/layout Minor
@react-pdf/renderer Patch
@react-pdf/examples Patch
@react-pdf/e2e-node-cjs Patch
@react-pdf/e2e-node-esm Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@mskec
Copy link
Contributor

mskec commented Jan 5, 2024

Tests do not pass for me with the fix.

@jrtell1
Copy link

jrtell1 commented Jan 19, 2024

Would appreciate this fix a lot! :)

@@ -16,7 +21,7 @@ const isFragment = value =>
* @param {Object} React element
* @returns {Array} parsed react elements
*/
const createInstances = element => {
const createInstances = async element => {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this is correct architectural-wise. We are mixing concepts here. createInstances should not fetch images, that's done separately on another layer. Can we preserve that?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not very familiar with this project and was just looking for a quick solution. Perhaps this issue would be better addressed by someone more acquainted with the codebase.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggested 2 possible approaches here #1369 (comment)
Do they make sense @diegomura?

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

Successfully merging this pull request may close these issues.

5 participants