Flutter Image.Network and CachedNetworkImage are not displaying? - image

When I try to show an image to the user it cannot be seen.
Image.network('https://picsum.photos/250?image=9')
I've tried adding
<uses-permission android:name="android.permission.INTERNET" />
to the AndroidManifest.xml file.
Still not displaying.
I have not tried this with IOS.
Also I've realised I'm getting an error as follows:
The following SocketException was thrown resolving an image codec: 'picsum.photos' (OS Error: No address associated with host.
Any idea on how I could fix this?
Edit 1:
this is the code for that I'm using:
CachedNetworkImage(
imageUrl: '$server/cdn/post/img?id=${this.id}', httpHeaders: imgHeaders,
placeholder: (BuildContext context, String url) {
return Center(child: CircularProgressIndicator());
},
errorWidget: (context, url, error) => Icon(Icons.error),
),
The server is my localhost url and it works fine as I am using it to fetch some data from my nodejs server and it works.
this.id is my widget's argument which is equal to an id that server will use to serve the correct image. It is defined and has a value.
Also this is a child of a Stack widget if that helps. Plus I've had this with other urls as well.

I was Having the same issue follow the steps below :
1) If you are on your emulator close it, or on real device just uninstall the application.
2) Change the DNS Configuration on you Mac/laptop
link to change DNS for Windows :https://www.windowscentral.com/how-change-your-pcs-dns-settings-windows-10
Link to change DNs for MAC :https://www.macinstruct.com/node/434
using Google's DNS on my computer worked for me, following are the coordinates for the DNS :'8.8.8.8 and 8.8.4.4'
Let me know if it works.

Open gradle.properties in android folder and replace existing classpath with classpath'com.android.tools.build:gradle:3.5.3'
Open Android/gradle/wrapper/gradle-wrapper.properties/
replase distribution URL with distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip
Flutter clean
Run release build on App
`

Related

P5.js not loading sound

I am trying to load an mp3 files (according to the examples) but I am getting
Unable to load bg.mp3.
The request status was: 0 ()
The error stack trace includes: loadSound
I have referenced my problem to this Github issue https://github.com/processing/p5.js-sound/issues/141 but I am unable to find a solution.
Also, I am using Brackets editor which starts a local server and opens a new Chrome instance.
let mySound;
function preload() {
soundFormats('mp3', 'ogg');
mySound = loadSound("bg.mp3");
}
function setup(){
createCanvas(displayWidth,displayHeight);
mySound.setVolume(0.1);
mySound.play();
}
Strange, the Sound: Load and Play Sound example seems to work fine.
The error seems to point to on an XHR load error, but it's unclear why.
It's worth trying the full version of loadSound() including the error callback:loadSound(path, [successCallback], [errorCallback], [whileLoading]).
Hopefully the errorCallback details will help solve the problem
e.g.
let mySound;
function onSoundLoadSuccess(e){
console.log("load sound success",e);
}
function onSoundLoadError(e){
console.log("load sound error",e);
}
function onSoundLoadProgress(e){
console.log("load sound progress",e);
}
function preload() {
soundFormats('mp3', 'ogg');
mySound = loadSound("bg.mp3",onSoundLoadSuccess,onSoundLoadError,onSoundLoadProgress);
}
function setup(){
createCanvas(displayWidth,displayHeight);
mySound.setVolume(0.1);
mySound.play();
}
Also try to navigate to the web server Brackets launches and access the file manually.
(e.g. http://localhost:BRACKETS_HTTP_PORT_HERE/bg.mp3). If everything is ok (bg.mp3 is in the same folder as the index.html file), your browser should load and display the default audio playback controls.
It's worth noting there are many other http servers you could try, here a few examples:
if you're on OSX you can use Python's HTTP Server (python -m SimpleHTTPServer in python 2 or python -m http.server)
if you use node.js there' an http-server module (e.g. npm install http-server then http-server in your project folder)
Apache variants (depending on OS, MAMP/WAMP/XAMPP, etc.), though might be overkill
The quick fix for anyone having this issue is to use a Local web server. (mamp/xamp/local etc). Then reference it in the preload/setup
sound = loadSound('http://localhost/audio.mp3', loaded);
The documentation does state -
you will need the p5.sound library and a running local server

Xamarin.Auth - Google authentication won't open in browser

I'm trying to do authentication on my Android application using Xamarin.Auth. Some time ago, Google made the policy that you cannot do this in an embedded web view (for totally valid reasons).
I'm trying to open the account authentication page in a browser, but keep getting the embedded web view. I understand that isUsingNativeUI needs to be true in the following code:
_auth = new OAuth2Authenticator(clientId, string.Empty, scope,
new Uri(Constant.AuthorizeUrl),
new Uri(redirectUrl),
new Uri(Constant.AccessTokenUrl),
null,
isUsingNativeUI = true);
At every point in my application, this always equals true.
Elsewhere, I have code that redirects to what should be a browser:
var authenticator = Auth.GetAuthenticator();
Intent intent = authenticator.GetUI(this);
this.StartActivity(intent);
Regardless, I keep getting a dreaded 403 disallowed_useragent error whenever I try to run the project. Is there another element to this that I'm missing?
To my knowledge, setting auth.IsUsingNativeUI = true in the constructor should dictate that it must open in a browser. I've been following this example to try and debug with no success. I even pulled the guy's repo down to my machine and ran it - the Intent variable at the moment of redirection is almost identical.
Could there be something stupid that I'm missing? What else might be going wrong?
I realize this is an old question, but I had the same issue.
You have to install version 1.5.0.3 of the Xamarin.Auth Nuget package. The newest one (version 1.7.0 right now) doesn't work. You'll have to also install the PCLCrypto nuget package in order to get that version to work.

Failed Prop Type Error in Fine Uploader

I'm trying to get Fine Uploader React to work but keep running into issues.
I'm getting the following errors:
Here's the URL: http://fineuploader.azurewebsites.net/
Here's what I've done so far:
Downloaded the source on to my computer from https://github.com/FineUploader/react-fine-uploader
I then npm installed react-fine-uploader and fine-uploader as per instructions
I ran webpack to transpile and bundle the code
Added an entry point and index.html
Finally, I simply published the app to a new Azure app/website
Any idea what's causing the issue?
P.S. My goal is to use Fine Uploader to upload files to Azure Blob Storage. At this point, I'm simply trying to get Fine Uploader going. I do realize that I'll have to enter a few pieces of information about my blog storage endpoint, etc. but I don't think this error is related to any of that.
A Gallery (and every higher level component of that library) needs an "uploader" props as explained in the section https://github.com/FineUploader/react-fine-uploader#high-level-components
An uploader is one of the 3 classes avaiable in the fine-uploader-wrappers package https://github.com/FineUploader/fine-uploader-wrappers#wrapper-classes
those are for upload to
Aws s3
Azure
or your enpoint
The uploader class need all the configuration endpoint, credentials, custom configuration, etc... (you can find a comprehensive list here in the api section https://docs.fineuploader.com/branch/master/api/options.html)
An example for s3 direct upload would be something like:
const uploader = new FineUploaderS3({
options: {
request: {
endpoint: "http://fineuploadertest.s3.amazonaws.com",
accessKey: "AKIAIXVR6TANOGNBGANQ"
},
signature: {
endpoint: "/vendor/fineuploader/php-s3-server/endpoint.php"
}
}
})
and use that uploader in a gallery
<Gallery uploader={ uploader } />
There are many usefull option for customization: callbacks, onEventHandler, etc you can find them all in the docs of fineuploader
Edit: if im not mistaken react-transition-group is necessary even if it's not listed anywhere in the docs...

Xamarin: Mock Location Crashes

I am working on an app, that reads the users GPS coordinates and changes them just a little bit to then set the new location as mock location. Now this all works but this part of the code crashes my build:
public bool SetMockLocation()
{
bool success = false;
var location = new Location("Test");
_locationManager.AddTestProvider("Test", false, false, false, false, false, false, false, Power.Low, Android.Hardware.SensorStatus.AccuracyHigh);
location.Latitude = Add700ToCoordinates();
location.Longitude = GlobalLongitude;
_locationManager.SetTestProviderLocation("Test", location);
return success;
}
I unfortunately have not been able to find much detail about this at all, all I know that my app Crahses and Visual STudio says:
Java.Lang.SecurityException: GetLocation.GetLocation from uid 10303 not allowed to perform MOCK_LOCATION
So, I decided not to debug the app from my laptop, but to start it from the phone - now with this app set as "Allow mock location".
Here is where it gets wired: Even though my app appears here (yes, I added the permissions) - when I click on it, my phone shows another app that I also have installed and that appears in this menu to be set as mock location. No matter how much I click on my app, my phone always takes the other app.
Nevertheless, as soon as I click on my app and launch it from my phone it simple crashes. Now, did I do something wrong? Im really out of ideas...
Thanks a lot guys!
The error:
Java.Lang.SecurityException: GetLocation.GetLocation from uid 10303 not allowed to perform MOCK_LOCATION
Reveals that you have not asked for permission to mock the location.
You need to add:
<uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION" />
To your AndroidManifest.xml file.

React Native Image Not Working with specific URL

I have the following code below, where the Image component encompasses two Image component.
<View style={styles.container} >
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
/>
<Image
style={{width: 50, height: 50}}
source={{uri: 'http://lghttp.24811.nexcesscdn.net/80B00B/qpb/media/catalog/product/cache/11/image/439x334/9df78eab33525d08d6e5fb8d27136e95/q/w/qw_neverdonejoggers_p_.png'}}
/>
</View>
For the first github URL it renders the img logo correctly as expected.
However for the second Image it doesn't render the source: qw_neverdonejoggers_p_.png
Which leads me to the conclusion that something wrong URL, however clicking on the URL correctly load the Img:
http://lghttp.24811.nexcesscdn.net/80B00B/qpb/media/catalog/product/cache/11/image/439x334/9df78eab33525d08d6e5fb8d27136e95/q/w/qw_neverdonejoggers_p_.png
I attempted to replicate the issue here, https://rnplay.org/apps/_dQXXw
but it renders both the images properly.
So its only on the local my computer that for some reason I can render second image ?
Using:
"react": "15.4.1",
"react-native": "^0.39.2",
Andrés' answer is somewhat correct, but it does not address the exact cause of the problem, and that is iOS' App Transport Security. iOS does not allow plaintext requests (http) by default, and so you need to define a 'whitelist' of URLs that can be allowed to override this particular protection mechanism. You have that list already set up so that your app can connect to localhost during development,, so just add new entries to it. You can see how to do so in this answer. Of course, this only works if you know the list of URLs in advance, which might not suit your needs. In that case, have a look at this article.
uri only works with https. In Android it should work fine with either http or https.
You will find further information here.
Guys there is an issue with Image component is that if first time initialize the component with source={{uri : 'some link'}} it may not work (at least not for me when I fetch image from HTTPS URL from Firebase storage). The trick is you have to trigger a change to source props like first you need to keep
source to source={undefined} and then change to source={{uri : 'some link'}}.
Hope it would help someone
Aside issue with HTTPS, make sure you set the width and height of the Image
How i make Image source with http or https url work is by resetting the android emulator am using.
You can clear the emulator by opening the android studio then click on tools tab at the top bar select AVD Manager once it open
Select the emulator you are using, right click on it then select wipe data.
Once that process is completed, open cmd or terminal at the root of your react-native project
$ npx react-native run-android

Resources