Cannot view images inside popup
ZakiMohammad opened this issue · comments
please add support for images
@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.
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>