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.

Sign up for GitHub

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

Jump to bottom

Cannot view images inside popup #104

Open
ZakiMohammad opened this issue Nov 11, 2021 · 3 comments
Open

Cannot view images inside popup #104

ZakiMohammad opened this issue Nov 11, 2021 · 3 comments
Assignees
@rmariuzzo
Labels
create story help wanted

Comments

@ZakiMohammad
Copy link

ZakiMohammad commented Nov 11, 2021 •
edited by rmariuzzo
Loading

No description provided.

@ZakiMohammad
Copy link
Author

please add support for images

@danpulley
Copy link

@ZakiMohammad Figured out how to add support for images using react-new-window. Looks like the library cannot load images from project sources because by default the url Prop is set to about:blank. A work around I did was to create a component that has the image content and then using react-router-dom create a route pointing to the component.

For example
export const MyView: React.FC = () => { return( <img src="/YOUR_IMAGE_NAME" alt="YOUR IMAGE"/> ) }

<Route path="/MY_VIEW" component={MyView}/>

Then override the default NewWindow url prop with the url of the route.
<NewWindow url="http://localhost/MY_VIEW"> </NewWindow>

This lets the newwindow component render the images and any other components.

@rmariuzzo rmariuzzo changed the title cannot view images inside popup Cannot view images inside popup Nov 27, 2022
@rmariuzzo rmariuzzo self-assigned this Nov 27, 2022
@gdenisov
Copy link

gdenisov commented Dec 7, 2022 •
edited
Loading

An alternative solution that doesn't require changing all the relative urls in your code is to set the <base href="YOUR_URL" /> in the <head /> of the new window (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base). Then the page would use that for all the relative links and srcs. Something like this should do the trick (swap localhost for what's appropriate for your environment):

<NewWindow 
  onOpen={(window) => {
    const baseEl = window.document.createElement("base");
    baseEl.setAttribute("href", "http://localhost:3000/");
    window.document.head.prepend(baseEl);
  }}
>
  ...
</NewWindow>

@gdenisov gdenisov mentioned this issue Dec 7, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@rmariuzzo rmariuzzo

Labels
create story help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@rmariuzzo @gdenisov @ZakiMohammad @danpulley