-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
Can't consistently see images loaded via loadImageFromURL
#68
Comments
I am also having this issue as well! Particularly when loading the image editor from a browser on iPad. |
Have You already solved that problem? If yes - how? |
@VitaliyOnRule I have not solved the problem. Although it does for some random reason seem to occur far less often. |
@humblecoder and @VitaliyOnRule I had the same issue of the images not loading consistently. I think it may have been some caching issue for me. It was an amazon s3 url. When I loaded the image I added the following cache busting query param to the image url string This answer was from here: |
@emyl3 and @VitaliyOnRule I actually ended up using my server as a "proxy" and loading the image from |
It is not a simple issue. But the only one way to solve it for 100% -is to write a proxy server or throw image via route of your server. Because some of remote s3 buckets and cloudflare/cloudfront mediators have origin white lists on their configurations and it is blocking access to the image from the javascript anyway. So to make it working for 100% - just get images via your backend |
Using v3.2.2, the editor never loads images located in Amazon S3. I always receive error: Here's an interesting thread I found about it: |
@jinwoo-kim-nhn any fixes for the problem ? |
Any updates? I'm experiencing the same issue with an AWS S3 image that's publicly available. |
May be this problem solved for AWS S3 bucket. you can try this. |
I have all public CORS settings in S3 and randomly getting this error, any updates? What I noticed in failed requests, there is no HTTP Request Method like GET/HEAD when it fails, no idea if Chrome DevTools doesn't show it, or it is possible to send request without method, probably not ... AWS s3 requires to have a method specified (I have GET/HEAD), maybe here is a problem? |
Same here. There is nothing blocking the download of these images. |
Only getting this issue with Toast. Renders the entire editor unusuable. Will seek out another tool. |
Agree, I temporarily disabled the editor tool since we don't know how to solve this right now. Any ideas? |
I was having the same issue with Amazon S3 urls, which after setting up the bucket CORS, it was still not working. Looks like a cache issue, so I just fixed it by adding a random parameter at the end of the url: s3_url+'&t='+Math.random() It seems to work well now. |
@arnaldoanez |
Hello, Any updates on this? I use pre-signed urls, so setting a random query like suggested above won't work; since aws check the url to validate it's signature. What other options do we have? (besides switching to a different image editor) |
It only works if you disable cache in chrome dev tools. Users don't open devtools, so that can't be a solution. |
On Firefox it works okay. Chrome however, it does not. |
@omar-dulaimi if you can you can create proxy route on your back-end which will return the image by the required route |
@VitaliyOnRule I'm not sure I understand what would the proxy do in this scenario, is it going to behave like a cdn? I currently get the pre-signed urls through the backend, just load them on the frontend in the editor. Also, I don't use cloudflare. But we do have nginx config on our elastic beanstalk. |
@omar-dulaimi with proxy you will request image from your server firstly - and will get the image hosted on aws. And you will exclude access-control-allow-origin error and will get the image for 100% because image will be requested not from the browser.
|
after digging into this and playing a bit with the source code. I found that this line here is causing the CROS issue. Providing a way to override it would solve the issue. UPDATE
|
After debugging with Burp Suite, I think I identified the problem and found a solution. No patch should be needed. What's the quick solution ? Explain the issue and solution First you have to know that by default the browser does not send the What's happening is that the browser tries to load the image from the So when you open the editor, it tries to load the image a second time, and you actually get a cached response of the first request that was made without the You can check this, by opening Chrome's inspector with "disable cache" checked. It should work. So adding |
@KrYpTeD974 's solution doesn't work for me :( |
@DanielePalombo Could you elaborate more ? I'm pretty sure this issue can be solved with the crossorigin="anonymous" tag. |
It doesn't work because my server makes a redirect to the source image on s3. I had to set the s3 cors configuration with my domain. |
@KrYpTeD974 Could you provide an example ? |
Hi. Any update on this? |
@sergeyukhanov |
For those using Froala and who have access to the source code for the plugin (I can't remember if the plugin source code is open or not still) just add this line somewhere in the
Won't work for signed URL's as people have mentioned, but works otherwise. |
We had the same issue with signed S3 URL. We found a workaround and preloaded the url in an Image object in the compenent implementing the editor.
|
@elcatania, did you find it worked well with Chrome? |
@brendon Yes it does |
Thanks @elcatania, Is it the case that you've not previously had an image in the page with that same |
@brendon The issue was exactly as described previously. The image was being loaded and the cached request threw an CORS error. But the manually reloading of the image somehow fixed the issue. We still dont really know how and why it works. |
Yea that's pretty strange :) Glad it works though :D |
@elcatania How can I apply your Changes or Where do I have to add these lines?
sorry I don't understand I am facing the same issue and apply all solutions and it still now working. Can you please help me to resolve this issue? Thank you |
@mhamzaraja basically in the component where you use the tui image editor. For us it was inside our wrapper component in the mounted event.
|
@elcatania I am implementing this in angular and on my end it's like
and I am passing the image URL to editor instance |
@elcatania Can you please share your code so I can check and adjust that according to my end? |
@mhamzaraja We do it in vuejs "mounted" event which should correspond to angulars ngAfterViewInit if i recall correctly. Do it before your 'this.editorComponent.editorInstance.loadImageFromURL' |
Any news? Same problem here. |
I'm having the same issue when trying to load images generated by Dall-E. |
@YanivWein24 What did you try? Do you display the image before it is editable? Did you set crossorigin=anonymous on the displayed image and not the editor? Do you see the Host header being sent when the image is requested? |
@KrYpTeD974 I'm generating images using different text-to-image AI models, and then the users can select the images they liked and start editing them using the image editor (on a new page). It is working fine most of the time, but it doesn't load images generated by DALL-E (every single time!). I tried to set crossorigin=anonymous on the displayed images and it didn't change anything. What I ended up doing was taking the images I received from DALL-E and uploading them to 3rd party service before redirecting to the image editor. and instead of using the original images URLs I use the URLs I receive when uploading the images. |
Version
3.2.0
Development Environment
MacOS 10.12.6
Chrome Version 69.0.3497.100 (Official Build) (64-bit)
Current Behavior
Using
loadImageFromURL
doesn't consistently display image. Occasionally there is a CORS error, despite the resource being fully configured for CORS. And sometimes it will load fine. It's fairly random. I am using the same test images for all tests. I can, with 100% certainty load the same images to<img>
tags as well as to a rawfabric.js
instance.Are there any updated (perhaps undocumented) steps to take after loading an image via
loadImageFromURL
? Is a canvas refresh/resize required? Must I perform some step in thePromise
after the fact? I'm hoping I'm simply missing something, but this is a fairly frustrating occurrence.UPDATE:
So, apparently, (in Chrome) when the dev tools are open it works. When the dev tools are closed, it fails. Video of issue in action.
When the tools are closed I receive
Access-Control-Allow-Origin
error. This, despite the fact that the resources are publicly accessible and currently configured to allow all'*'
. You can see in the video the same resources being "previewed" in the grid via<img>
tags. However, when attempting to open a modal and simply callloadImageFromURL
it fails. I've triednextTick
and a host of other "hacks", but nothing seems to matter other than dev tools being opened or closed.FYI, I'm
console.log
ing nearly everything. Occasionally I receive anexecuting command state is locked
error from the editor instance as well. No idea what that means.The text was updated successfully, but these errors were encountered: