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
Related
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
`
I am unable to make the URL public, but I've pasted the full URL into my browser and can confirm the page is right - the image shows in the browser.
But... when I copy that exact URL into a Xamarin.Forms image, set as:
<Image
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Aspect="AspectFit">
<Image.Source>
<UriImageSource Uri="https://example.com/images/doesntshow.jpg"
CacheValidity="3"
CachingEnabled="false"/>
</Image.Source>
</Image>
The image simply will not show.
If I substitute the URL: "https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg" the image shows fine.
NOTE: There is 0 possibility the URL is incorrect or has an error because... I'm not typing it; I'm copying/pasting it and it's showing just fine in the browser, just not the Xamarin.Forms app.
I've not a clue as to what to look for. Does anyone else?
ISSUE RESOLVED - thanks for the good mental vibes :)
I found the resolution here:
https://forums.xamarin.com/discussion/105036/images-from-url-not-showing-on-android
April 5
"Just change the following options and it should work with https too.
Android Options => Advanced
HttpClient implementation = Set to "Managed" option value
SSL/TLS implementation = set to "Native TLS 1.2+" option value"
I still don't understand why prior to this setting change, I could load https images from other servers just fine (e.g. "https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg"). So... I will lose a bit of sleep wondering what is different on my server from wiki's. If you have a clue, please share.
I'm implementing an invisible reCAPTCHA as per the instructions in the documentation: reCAPTCHA V2 documentation
I've managed to implement it without any problems. But, what I'd like to know is whether I can simulate being a robot for testing purposes?
Is there a way to force the reCAPTCHA to respond as if it thought I was a robot?
Thanks in advance for any assistance.
In the Dev Tools, open Settings, then Devices, add a custom device with any name and user agent equal to Googlebot/2.1.
Finally, in Device Mode, at the left of the top bar, choose the device (the default is Responsive).
You can test the captcha in https://www.google.com/recaptcha/api2/demo?invisible=true
(This is a demo of the Invisible Recaptcha. You can remove the url invisible parameter to test with the captcha button)
You can use a Chrome Plugin like Modify Headers and Add a user-agent like Googlebot/2.1 (+http://www.google.com/bot.html).
For Firefox, if you don't want to install any add-ons, you can easily manually change the user agent :
Enter about:config into the URL box and hit return;
Search for “useragent” (one word), just to check what is already there;
Create a new string (right-click somewhere in the window) titled (i.e. new
preference) “general.useragent.override”, and with string value
"Googlebot/2.1" (or any other you want to test with).
I tried this with Recaptcha v3, and it indeed returns a score of 0.1
And don't forget to remove this line from about:config when done testing !
I found this method here (it is an Apple OS article, but the Firefox method also works for Windows) : http://osxdaily.com/2013/01/16/change-user-agent-chrome-safari-firefox/
I find that if you click on the reCaptcha logo rather than the text box, it tends to fail.
This is because bots detect clickable hitboxes, and since the checkbox is an image, as well as the "I'm not a robot" text, and bots can't process images as text properly, but they CAN process clickable hitboxes, which the reCaptcha tells them to click, it just doesn't tell them where.
Click as far away from the checkbox as possible while keeping your mouse cursor in the reCaptcha. You will then most likely fail it. ( it will just bring up the thing where you have to identify the pictures).
The pictures are on there because like I said, bots can't process images and recognize things like cars.
yes it is possible to force fail a recaptcha v2 for testing purposes.
there are two ways to do that
First way :
you need to have firefox browser for that just make a simple form request
and then wait for response and after getting response click on refresh button firefox will prompt a box saying that " To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier. " then click on "resend"
by doing this browser will send previous " g-recaptcha-response " key and this will fail your recaptcha.
Second way
you can make any simple post request by any application like in linux you can use curl to make post request.
just make sure that you specify all your form filed and also header for request and most important thing POST one field name as " g-recaptcha-response " and give any random value to this field
Just completing the answer of Rafael, follow how to use the plugin
None of proposed answers worked for me. I just wrote a simple Node.js script which opens a browser window with a page. ReCaptcha detects automated browser and shows the challenge. The script is below:
const puppeteer = require('puppeteer');
let testReCaptcha = async () => {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.goto('http://yourpage.com');
};
testReCaptcha();
Don't forget to install puppeteer by running npm i puppeteer and change yourpage.com to your page address
I am automating Internet Explorer using SHDocVW.dll and MSHTML with C#, and I wish to save an image from the page to the disk (JPEG format).
I can't use the WebClient class to download the image; if I do it, I end up downloading the site's login page. I can't print the screen either, because the browser has to remain invisible during this process, running in the background.
I have tried to do the following:
IHTMLImgElement imgElement = ...;
IHTMLControlRange imgRange = ...;
imgRange.add(imgElement as IHTMLControlElement);
imgRange.execCommand( "copy", false, null );
This does nothing. I am not able to extract anything from the clipboard. Every solution I found didn't work for me.
Your webclient approach is probably missing cookies... see How do I log into a site with WebClient? for an example that handles cookies.
your code looks fine except the user has to change the security setting to enable clipboard access. If the image is cached on disk you can dig the WinInet cache after parsing the page for the image location.
hope someone can help. just cannot get a new window to open in Firefox without address bars. IE works fine with below code
window.open('/pageaddress.html', 'winname',
directories=0,titlebar=0,toolbar=0,location=0,status=0,
menubar=0,scrollbars=no,resizable=no,
width=400,height=350);
I need to make for all browser
Firefox 3.0 and higher have disabled setting location by default. resizable and status are also disabled by default. You can verify this by typing `about:config' in your address bar and filtering by "dom". The items of interest are:
dom.disable_window_open_feature.location
dom.disable_window_open_feature.resizable
dom.disable_window_open_feature.status
You can get further information at the Mozilla Developer site. What this basically means, though, is that you won't be able to do what you want to do.
One thing you might want to do (though it won't solve your problem), is put quotes around your window feature parameters, like so:
window.open('/pageaddress.html','winname','directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=400,height=350');
I agree we can not hide address bar in modern browsers, but we can hide the URL in address bar (e.g show URL about:blank). The following is my work around solution:
var iframe = '<html><head><style>body, html {width: 100%; height: 100%; margin: 0; padding: 0}</style></head><body><iframe src="https://www.w3schools.com" style="height:calc(100% - 4px);width:calc(100% - 4px)"></iframe></body></html>';
var win = window.open("","","width=600,height=480,toolbar=no,menubar=no,resizable=yes");
win.document.write(iframe);
Check the mozilla documentation on window.open.
The window features ("directory=...,...,height=350") etc. arguments should be a string:
window.open('/pageaddress.html','winname',"directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,width=400,height=350");
Try if that works in your browsers. Note that some of the features might be overridden by user preferences, such as "location" (see doc.)
Workaround - Open a modal popup window and embed the external URL as an iframe.
In internet explorer, if the new url is from the same domain as the current url, the window will be open without an address bar. Otherwise, it will cause an address bar to appear. One workaround is to open a page from the same domain and then redirect from that page.
check this if it works it works fine for me
<script>
var windowObjectReference;
var strWindowFeatures = "menubar=no,location=no,resizable=no,scrollbars=no,status=yes,width=400,height=350";
function openRequestedPopup() {
windowObjectReference = window.open("http://www.flyingedge.in/", "CNN_WindowName", strWindowFeatures);
}
</script>