This may seem like a duplicate but I've followed the answers to maybe a dozen similar questions on Stack and none of the solutions are working for me.
The React Native docs say load to local images like so:
<Image source={require('./my-icon.png')} />
I've placed the image 3D-home2#x.jpg in the same folder as the JS file:
I also tried placing it at the project root:
I also tried placing it in Images.xcassets and loading it like require('image!3D-home').
In between these efforts, I cleared the module cache several times with yarn start -- --reset-cache. Did a full XCode project 'clean' several times and rebuilt the app. No matter what I do I get some variation of this error (project name redacted):
What am I doing wrong here? It seems like I'm following the instructions exactly but I cannot get an image to load.
<Image
style={{
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
left: 0,
zIndex: 10
}}
source={ require('./3D-home#2x.jpg') }
/>
The solution was to remove #2x from the file name. This is because React Native offers the ability to automatically swap out images using suffixes, so I was unwittingly trying to do that incorrectly or something:
You can also use the #2x and #3x suffixes to provide images for
different screen densities.
https://facebook.github.io/react-native/docs/images.html
Related
The pain of Content Security Policy and scripts/images resources. I have almost everything working but not consolidated yet. First step complete. Except for Bootstraps integrated w3.org SVG Icons that you can use unless you set to unsafe-inline or data: which both have security concerns.
Is there any override to replace all the background SVG to a 'self' hosted image folder like bootstrap-icons?
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
Example above of one of the icons, another is the hamburger icon when the size shrinks.
Or any proper way to allow these that I dont know about.
I am trying to reuse some components built for web application using reactjswith radium.
I have a component which contains outline css property . I reuse the component , unfortunalty , i got this error :
My questions are :
What is the alternative of outline property in react-native for both ios or android ?
Is there alternative of radium in react-native ?
Should I manage manually this difference of style properties naming among iOs DEV, android DEV as well as web DEV ?
I think you are looking for the border styles.
More specifically from the facebook react native docs:
borderWidth ReactPropTypes.number
borderStyle ReactPropTypes.oneOf(['solid', 'dotted', 'dashed'])
So for instance if you wanted to make a 10 x 10 box with dashed lines...
<View style={{ borderWidth:1, borderStyle: 'dashed', width: 10, height: 10, }} />
I have to download images to my iOS apps local file system and read them back.
On my simulator I can see file system of my app with directories
/Library/Developer/CoreSimulator/Devices/[UUID]/data/Containers/Data/Application/[UUID]/
/Documents
/Library
/tmp
To try out I copied foo.png to /Documents folder and then tried
<Image source={{uri: "file://Documents/foo.png"}} style={{width:100, height:100}}/>
This does not work, any idea whats a way to do this.
This also took me ages... with better info it would have been 5 minutes!
I use react-native-fs to get directories (which works for ios and android):
var RNFS = require('react-native-fs');
RNFS.DocumentDirectoryPath then returns something like '/var/mobile/Containers/Data/Application/15AC1CC6-8CFF-48F0-AFFD-949368383ACB/Documents' on iOS
My Image element looks like:
<Image
style={{width:100, height:100}}
source={{uri: 'file://' + RNFS.DocumentDirectoryPath + '/myAwesomeSubDir/my.png', scale:1}}
/>
My problem was that I did not set width and height first, which is not needed for urls or paths to assets. When using a base64 uri the width and height are also mandatory (that actually led me to the solution!).
Try tilda (~). React Native should expand that.
<Image
style={{width:100, height:100}}
source={{uri: '~/Documents/myAwesomeSubDir/my.png', scale:1}}
/>
I've just started using the Angular Leaflet directive (http://tombatossals.github.io/angular-leaflet-directive/#!/) and I'm trying to integrate this within an Ionic project.
On the browser, everything works fine: the map tiles are loaded in. When I compile the app with XCode and run in within the iOS simulator, the tiles do not load as expected.
When I use the inspector, I noticed that the html for the tiles that are loaded in is of the following form:
<img class="leaflet-tile leaflet-tile-loaded" src="//b.tile.openstreetmap.org/18/131008/87171.png" style="height: 256px; width: 256px; left: 791px; top: -114px;">
Notice the protocol is missing with the src property. Within the Cordova wrapper, the app assumes that this should be file://, and naturally fails to load in the tiles.
Is there any way to either:
Explicitly add the http:// protocol to the img src?
Set Cordova to default to http:// with URI's that start with //?
GitHub issue: https://github.com/tombatossals/angular-leaflet-directive/issues/460
I don't know the exact cause of the problem, but it seems to be an issue with the latest version of the leaflet-directive.
As a current work-around until the issue is fixed, use angular-leaflet v0.7.7 instead of the latest.
If you use bower, change the bower.json line to
"angular-leaflet": "0.7.7"
make sure it's not '~0.7.7'
Hope this helps!
This issue seems to be fixed in the current version of the Angular Leaflet Directive.
I am currently using this code in my controller and it works in the browser as well as on device:
angular.extend($scope, {
center: {
lat: 52.367215,
lng: 4.893036,
zoom: 1
},
maxbounds: {},
defaults: {
maxZoom: 16,
minZoom: 12,
tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
tileLayerOptions: {
opacity: 0.9,
detectRetina: true,
reuseTiles: true,
},
scrollWheelZoom: true
}
})
I deployed a Rails app successfully, however, the images are not displaying. This is the 404 error that's showing in the console
GET http://mydomain.com/assets/myimage.png 404 (Not Found)
Inside my application directory on my server, there's three subdirectories
current releases shared
which is a setup created by the deployment script I borrowed from Ryan Bates.
I can see the images in the images directory of the assets folder in current
current/app/assets/images$ ls
glyphicons-halflings.png glyphicons-halflings-white.png qb.png
However, in the assets folder of the shared directory (which is I'm guessing where they're being put after everything's compiled for production), the same images have some (I'm assuming) cache information attached to them, such that the image I want isn't
myimage.png
but rather
myimage-0bb3f134943971c95b2abdfd30f932c7.png
I'm wondering if this is what's causing the 404 error, as (I'm assuming) the code's looking for myimage.png in the shared/assets directory.
Do you know how I can deal with this problem?
contents of /shared/assets
/shared/assets$ ls
application-39c95ed7b8d86b0698b6c443563e33c7.js fontawesome-webfont-c4adb9424c8b6a6b1b9b0d2627528c4c.woff
application-39c95ed7b8d86b0698b6c443563e33c7.js.gz fontawesome-webfont-f57557847fd1897100790d9df344ded8.ttf
application-7a6376d676fb88537b9f839687ccaad3.css glyphicons-halflings-4e5b89324f1ac987ddf6835ef51f5fe9.png
application-7a6376d676fb88537b9f839687ccaad3.css.gz glyphicons-halflings-white-2fa53df59ca25ee50f59f971c0c9175d.png
application-a184171300937caf263adbc5e8582ba4.css manifest-990c8a24196fee5e9c394078c326c763.json
application-a184171300937caf263adbc5e8582ba4.css.gz myimage-0bb3f134943971c95b2abdfd30f932c7.png
fontawesome-webfont-57b442a30fcae0d4334299c521a326a2.svg twitter
fontawesome-webfont-8140ac47a16c8f7074e59f2ebe0657eb.eot
code used to display images
For one image, I create a span like this
and then assign it a background image
.qb{
position: absolute;
width: 50px;
height: 50px;
background-image: url('/assets/qb.png');
left: 75px;
top: 300px;
}
For another image, I have a template like this with a class that automatically uses Twitter bootstrap to create a x to let uses click and remove a page element
<script id="blahblah_template" type="text/underscore">
<h2> The Story <i class='icon-remove'></i></h2>
It's triggering a 404 even though the image is on the server
Failed to load resource: the server responded with a status of 404 (Not Found)
http://mydomain.com/assets/glyphicons-halflings.png
you should use asset helpers provided by rails which would automagically create the right url to the image with caching build in. here is how:
.qb{
position: absolute;
width: 50px;
height: 50px;
background-image: url( <%= asset_path 'qb.png' %> );
left: 75px;
top: 300px;
}
the above will map qb.png to qb-0bb3f134943971c95b2abdfd30f932c7.png & also update the url once the caching fingerprint changes. just make sure that your stylesheet filename has .erb at the end, something like stylesheet.css.erb
see The Asset Pipeline guide for more information
[edit]
For Bootstrap integration with rails asset pipeline, kindly use gem like bootstrap-sass. it will fix your issues with images