When I use flutter run -d chrome --web-renderer=canvaskit in flutter web I do not see image (network image)
flutter run -d chrome --web-renderer=canvaskit
This is what i see: Error Message
Read
https://docs.flutter.dev/development/platform-integration/web/renderers
and
https://docs.flutter.dev/development/platform-integration/web/web-images
Cross-Origin Resource Sharing (CORS)
CORS is a mechanism that browsers use to control how one site accesses the resources of another site. It is designed such that, by default, one web-site is not allowed to make HTTP requests to another site using XHR or fetch. This prevents scripts on another site from acting on behalf of the user and from gaining access to another site’s resources without permission.
When using , , or , the browser automatically blocks access to pixels when it knows that an image is coming from another site and the CORS policy disallows access to data.
WebGL requires access to the image data in order to be able to render the image. Therefore, images to be rendered using WebGL must only come from servers that have a CORS policy configured to work with the domain that serves your application.
So if you want to still use canvaskit import them to assets folder and use it as a local asset
Related
I am hosting a Flutter web app on Google Cloud Storage which works fine and is accessible via my sub domain app.mydomain.com. In general i'm pretty happy with Google Cloud Storage since it is easy to deploy and the costs of hosting are cheap.
Unfortunately, routing is a problem.
When i navigate via the app to the login page the address bar changes to app.mydomain.com/login and the login page is shown. But when i reload the page via the browser's reload button, I see the following XML
<Error>
<Code>NoSuchKey</Code>
<Message>The specified key does not exist.</Message>
</Error>
I assume this is because Google Cloud Storage wants to fetch the index.html file in the login folder. However, the bucket does not contain such a login folder.
Question:
How can I get this running?
Is it possible to deactivate the feature of fetching subfolders within a bucket to redirect the information of the address bar to my flutter app?
What would be a cheap alternative if there is no alternative?
Well, I figured out the problem.
If you pay close attention the the URL which i've posted in the question you might notice that the URL lacks the # character which is normally present. This is because i've had set setPathUrlStrategy() from the url_strategy package.
So instead of using app.mydomain.com/login my URL now looks like this app.mydomain.com/#/login which causes Google Cloud storage to correctly forward the URL to my application instead of trying to fetch a file or folder within the bucket.
I have some images in my google cloud storage. the bucket is public.
When I try to access the image from ionic in the browser the image is shown But when I run my app on devapp or even on the browser of the tablet the image Just won't show. Does anyone have a solution for me???
The URL you shared is indeed publicly accessible. However, the issue you’re experiencing might be coming from your cross-origin resource sharing configuration (CORS).
CORS is a mechanism that allows interactions between resources from different origins, which is normally prohibited in order to prevent malicious behavior.
Please see the following link to configure CORS on your bucket that stores the images and try accessing them through you app again.
For more information on handling CORS issues in Ionic I'd also recommend you to review this article, which is the official documentation of Ionic.
Let me know if it helps.
I have a compute engine and google cloud storage work together.
The compute engine has a tomcat running allow browsers to load a page and get the images from the google cloud storage.
How could i allow the html page (generated by the servlet) to download several images from the google cloud storage where the images are not public shared??
What i expect is when the broswers downloaded the html page then it will request the images directly from the cloud storage, but how can i allow the broswer to do it without making the images public sharable?
Thanks
This is tricky but possible. If you want to manage some sort of authorization scheme for who can and cannot view GCS images, you'll need a service which can vend short-term, signed URLs to parties that your service decides are authorized. You then embed the URLs in the image tags of your dynamically-generated HTML pages, or you fetch the URLs from the server with JavaScript.
The gcloud-java library has a signURL method for generating such a URL.
Another option would be to simply obfuscate the image URLs to something unguessable and rotate them every so often.
I was experimenting with github after building a little webapp as a project for free code camp. After hosting it on github pages it shows up broken. Most of its content is blocked. This is the link https://mojojojo77.github.io/
On mozila it says that the connection is secure but "firefox has blocked parts of this page which are not secure." I looked into the console for the problem and the API's I used seem to be cause. Is there a way to bypass this ? Like asking the user for permissions.
Load your resources using a // protocol instead of http:// or https://. That will cause the browser to request resources using a protocol that matches the page (using SSL if the page does, and not if it doesn't).
I am creating a hosted app for chrome web browser. I want to include an option for this app so that user can specifiy the URL that the app opens by default. For example, they may want the app to open http://myapp.com/username or http://myapp.com/somethingelse.
Following this, I added "options_page": "options.html" to my manifest file and added options.html. However, I couldn't load the app. My browser said:
Could not load extension from '/home/cookiemon/path/to/myapp'. Invalid value for 'options_page'. Hosted apps must specify an absolute URL.
Does this mean, for hosted apps, I can only include a URL to a page on a web server?
Yes. Hosted apps aren't much more than bookmarks with slightly enhanced capabilities. Moreover, they're legacy app types that will likely be deprecated. If you want your app to work offline, build a Chrome App.