search

ailon / markerjs2

Add image annotation to your web apps.
https://markerjs.com
Other
142 stars 39 forks source link

Image is not rendered intermittently #182

Open weirdyang opened 9 months ago

weirdyang commented 9 months ago

Hi,

I'm trying to display the image with the popup display, I noticed sometimes the image is not rendered, and I would need to do a window resize for it to appear.

I'm not quite sure what is happening as it happen intermittently, I thought it might be due to the image src not being fully loaded so I added an load event handler, however it does not resolve the issue.

It seems the images are loaded with width = 0 when it is rendered in the editor: image

Am I initializing it incorrectly? Any help is appreciated, thanks.

Here's my sandbox https://codesandbox.io/s/66q54x

ailon commented 9 months ago

It's hard to say what could be the cause, but 2 observations for a start:

  1. You are using a 1.5-year-old version of marker.js. Is there a reason for that? If not, you should upgrade to see if that maybe solves the issue.
  2. You are opening the popup right after selecting the image (correct me if I'm wrong). I think it makes sense to wait for image to load and only then open MarkerArea. As a test you can just add a separate button to manually open MarkerArea and see if the issue disappears.

Hope this helps.

weirdyang commented 9 months ago

ahh thanks, I was using the demo code sandbox , wasn't aware it was outdated, will try both of your suggestions

yes, I am, so I moved the opening of the popup into the image onload event handler.

I've since then added a timeout of 200, and that seems to have resolved it