Using v-parallax with an online image source like this works fine:
<v-parallax
dark
height="470"
src="https://images.unsplash.com/photo-1466916932233-c1b9c82e71c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</v-parallax>
But using it with a local asset src="#/assets/img/my-picture.png" doesn't work.
The same goes for <v-img src="my/local/source>, whereby <img> works fine.
What is the way to make it work?
Try this :src="require('#/assets/img/my-picture.png')"
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
I was able to store png images in MongoDB by using a method similar to the following code:
// server.js
q.desc.data = fs.readFileSync(__dirname + '/logo.png');
q.desc.contentType = 'image/png';
However, I could not make the image to show up in a web page controlled by AngularJS. The image data can be retrieved inside the page, but the following line shows up as text "", presumably because BSON format is different from the raw data.
// core.js (on the client Angular side)
$scope.q.desc.data = '<img src="data:image/png;base64,' + $.base64.encode($scope.q.desc.data) + '" />';
The only way I have found so far to display the image in a browser is to send it standalone from the backend:
// server.js
res.contentType(doc.desc.contentType);
res.send(doc.desc.data);
But how do we embed this image inside a web page? The Web browser cannot download/cache the image directly because the image doesn't have a URL. It lives inside the MongoDB. Thanks!
I am facing this issue in Firefox 16.
I created a new svg file (NewImage.svg) with <image> tags:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
width="224px" height="54px" viewBox="-0.58 -1.162 224 54">
<image xlink:href='background.svg' width='224' height='54' />
<image xlink:href='foreground.svg' x='12' y='12' width='32' height='32'/>
</svg>
When I open this NewImage.svg in Firefox directly, it opens perfectly.
However, when I refer to this svg file from inside my GWT application, the NewImage.svg does not load in Firefox 16. It does load correctly in IE 9.
Gecko does not allow SVG loaded inside to load any external resources, for security reasons (basically to prevent images from phoning home when users won't expect them to). So you need to put any resources you want to use into data: URIs
I have a NPAPI plugin (built using firebreath) which works fine Safari and Google Chrome (both on Mac); But it fails to work on Firefox.
When I looked at the Firefox plugins (about:plugin) it correctly shows my plugin name and version and shows it as Enabled.
Following is the code I use to load the plugin in javascript -
<object name="fp" type="application/x-myplugin" width="0" height="0">
<embed name="jsPlugin" id="jsPlugin" width="0" height="0" type="application/x-myplugin">
</embed>
</object>
And I use this plugin as follows -
function PluginVwersion(){
var jsPlugin = document.getElementById('jsPlugin');
jsPlugin.GetScannerDetails();
}
But whenever I test this code in firefox, it doesn't work, and I see following error in the Error Console -
Error: jsPlugin.GetScannerDetails is not a function
Source file: file:///Users/u162794/Desktop/test.html
Any help is appreciated.
Regards,
Yogesh Joshi
Why exactly are you trying to use an embed tag inside an object tag? Remove the embed tag, set your object tag id to jsPlugin, and then try it.
<object id="jsPlugin" type="application/x-myplugin" width="0" height="0"></object>
Also try using the example FBControl.htm file that is created in the build/projects//gen folder in your project like is suggested on the FireBreath website.