i'm trying to display the picture of a shop in a single-shop page after clicking on said shop on the shop-list page.
once i clicked it takes the datas (from phpmyadmin) of that shop only and display the details. the name, adresse, phone number, etc all work but the picture.
i created a colomn image where i stock the url that leads to the picture located in my assets folder of the react folder.
but i tried just with url to see if the Image balise would work... AND IT WORKED :
<View><Image style={{resizeMode : 'cover'}} source= {require('../../../assets/picture1.jepg')} /></View>
so i then tried with an object called pharmaimages (it's basically just the url itself that i stocked in my database with the '' included) but it says invalid. i also tried with the propriety uri but it's even less clear.
<View><Image style={{resizeMode : 'cover'}} source= {require(pharmaimages)} /></View>
in my mind it makes perfect sense but it just doesn't work
Try storing it as require('../../../assets/image.jpeg') in the database. Fetch the data and then once you map it or whatever you do in your app, show it using the following code:
<View>
<Image style={{resizeMode : 'cover'}} source={image} />
</View>
This is one of the common issues, that most of developers got into.
The other answers may also right, But to be more precise I am adding my comments on this Question.
Actually, the require statement will never evaluate value we are passing as parameter, It will directly look for the path we are providing into it, also It is working in same way like we are importing other libraries or Components.
So if we provide dynamic value at run time with require we may fail to see expected behaviour.
Here, I am also attaching some important links which might help you to understand clearly.
Links:
React Native Official Image Doc
Same issue related thread on Stackoverflow
WORKAROUND
To go with workaround for this kind of situation you can directly store your file paths with require function in your data storage.
for ex.
Instead of storing path like '../../../abc/def.png'
Store value as require('../../../abc/def.png')
Related
React Native : Alternate way to get the Image require to work when array of image paths got dynamically from fetchapi
Tried the below and aware that require always need the fixed path in quotes('') which works well when static image path is known. Thee should be alternate way to map the images which is received from fetchapi.
source={require('./assets/images/'+{item.image_path})}
Example fetch api json response is: [{user_name: 'DynamicUser1', image_path: 'DynamicUser1.jpg'},{user_name: 'TestUser1', image_path: 'TestUser1.jpg'}... ]
Need alternate way to get the images rendered with the dynamic image path rightly picked from the fetch api.
userData = this.state.resultsUserData.map((item) => {
return (
<View key={item.user_name} style={ styles.container }>
<Text style={styles.title}>
{item.user_name}
</Text>
<TouchableOpacity goBack={()=>this.backAction} onPress={()=>this.homepage()}>
<Image key={item.image_path}
source={require('./assets/images/'+{item.image_path})}
</TouchableOpacity>
</View>
)
}
require doesn't work dynamically like that. Since you already have the images in the assets, you should write the require's for each of them in advance and call the appropriate one when needed. You can read more about this limitation here.
I'm trying to use react-native-camera#0.4.1 (with react-native#0.39.2) to create a QR code scanner. The relevant essentials of my render() method are:
<Camera
aspect={Camera.constants.Aspect.fill}
onBarCodeRead={(data) => console.log(data)}
barCodeTypes={['qr']}>
</Camera>
Without the barCodeTypes prop, everything works as expected. But once I include it, the view does not render, and I get the following error message:
*** -[AVCaptureMetadataOutput setMetadataObjectTypes:] Unsupported type found
- use -availableMetadataObjectTypes
I'm guessing that I just need to write my ['qr'] argument in some other and correct way, but I'm not able to find any information in the documentation.
Ok, so I found another post on Stack Overflow that helped me figure out the availableMetadataObjectTypes. So to fix my particular problem, I'll just be changing barCodeTypes={['qr']} to barCodeTypes={['org.iso.QRCode']}.
It should be changed to
barCodeTypes={[RNCamera.Constants.BarCodeType.qr]}
I'm try display a image on a component on React-native, but I don't know why this error happens...
Example of code:
render () {
let { convenience } = this.props
return (
<View style={{flexDirection: 'row', height: 50}}>
<Text style={{marginRight: 30}}>{convenience.name}</Text>
<Image source={require('./icons___favorito_ativo.png')} />
</View>
)
}
Printscreen:
I too faced the same error. After a lot of trying, I restarted the packager, and the app picked up the image. So the solution is: Restart the packager.
Hope this helps.
Currently an open issue with React Native: https://github.com/facebook/react-native/issues/6691. Highly annoying - Reloading the app and/or restarting the package manager is, for now, the only solution I currently am aware of.
That happened to me many times with images exported from sketch, it's weird.
I don't know why, but after exporting the same image from photoshop the error disappeared.
I had a spaces in my directory name. To fix it I just used another directory.
Changed
...\Desktop\develop (test)\MyProject...
to
...\Desktop\develop\MyProject...
I know this is going sound pretty weird, but I'm going to add this comment in case anybody else gets here. I created a index.ios.js file by copying a simple example from something online at https://rnplay.org I kept getting "unexpected character" errors. I'm using Atom.io as my script tool. I was thinking perhaps I had an encoding issue with the wrong character set. I've confirmed I'm using UTF-8
So I was using the (left/right) arrow keys on my keyboard, and I notice the cursor would stop moving for two keyboard arrow pushes, right at the location identified in my Emulator Red Screen of Disaster. It was like there were two invisible characters in my code. I played with this for a pretty long time to confirm. I was able to highlight the "hidden" characters and delete them.
After deletion, the new code works great.
Bizarre. Not sure what was there. (Note: I copied the Slider Example Code from https://rnplay.org/apps/5FsfPA and I used a "Select All" and Command-C to do the copying and Command-V to paste... if anybody wants to repeat the experiment)
And yes, I know how silly this sounds. Perhaps others have hit the same issue? The verification test is pretty easy. Start at the location identified by the Red screen error message. Use the keyboard arrow and verify the cursor on your text moves for each key push.
I had similar error but just with android.
And the problem was in ios suffix:
Filename was back-icon#4x.ios.png
Then in code:
export const backButton = require('../../images/back-icon#4x.ios.png');
When I remove the suffix in filename and in code ( to '../../images/back-icon#4x.png') error disappeared.
I had the same problem. The solution that worked for me was to remove "_" on image's filename and finally hot reload your application.
I followed this nice article
http://www.lunatech-research.com/playframework-file-upload-blob
and have a perfectly working image upload solution
My questions is, if the user doesn't select any image, how do I assign a default image during save (probably stored in the server)?
if (!user.photo)
user.photo= ?;
user.save();
The one-hack that I can think of is upload the default image and see which UID "Play" stores in the /tmp directory and assign that above. Is there an elegant named* solution to this?
when I say named, I mean I want the code to look like (which means I know what I'm doing and I can also write elegant automated code if there are more than one picture)
user.photo= "images/default/male.jpg"
rather than (which means I'm just hacking and I can't extend it elegantly for a list of pictures)
user.photo= "c0109891-8c9f-4b8e-a533-62341e713a21"
Thanks in advance
The approach I have always taken is to not change the model for empty images, but instead do something in the view to show a default image, if the image does not exist. This I think is a better approach because your are corrupting your model for display purposes, which is bad practice (as you may want to be able to see all those who have not selected an image, for example).
To achieve this, in your view you can simply use the exists() method on the Blob field. The code would look like
#{if user.photo.exists()}
<img src="#{userPhoto(user.id)}">
#{/if}
#{else}
<img src="#{'public/images/defaultUserImage.jpg'}">
#{/else}
I have assumed in the above code that you are rendering the image using the action userPhoto as described in the Lunatech article.
I'd assume you can store the default image somewhere in your applications source folder and use
user.photo.set(new FileInputStream(photo), MimeTypes.getContentType(photo.getName()));
to save the data. Photo is just a File object, so you can get the reference of your default image and use it.
I've a bit experience with qt+ and creating not so complex web pages, but I don't know how begin with titanium...when I run the default app this work...I can change the index.html like a web page...I can include javascript code and jquery too...very nice...but when I try run api functions I don't know how include these...all examples talk about iphone and a app.js file...I'm trying make a desktop app and don't appear any .js...I can create these but don't work
...in the docs I read things like these:
var win = Ti.UI.createWindow(); var view = Ti.UI.createView({backgroundColor:"red"}); win.add(view); win.open();
I don't know where I've put this code...I try put it inside a javascript inside the html (bad practice!) but it don't work...I put it inside a function onload but don't work neither.....there are any "convention" with the names for the files for this work?...I think this is like create a very dynamic web page but I don't know how work with the api....I see the example "kitchen something" but it wasn't so clear to mee...I see a examples like this:
http://mobile.tutsplus.com/tutorials/appcelerator/appcelerator-using-json-to-build-a-twitter-client/
but seems this work different when is an ipod to when it is a desktp app...I create an app.js (like the tuto) and put my code inside it but it never run...I look the source code and only need create a .js and inside my "home.html" link it..but it don't work...I create a index.js too but it don't work neither
please help..I'm very noob...thanks
Aaron:
This reply kindly brought something that could have been a solution but just made me lose more than 15 minutes of my time, as these first online courses have info about how to create a new project with a default html file, not about the original poster's issue.
The original poster's issue is that he has a new project with an index.html file, but no app.js file.
And he then doesn't understand where he could put the sampe code :
var win = Ti.UI.createWindow();
var view = Ti.UI.createView({backgroundColor:"red"});
win.add(view);
win.open();
... as whatever he puts in app.js is not executed.
The documentation in Titanium Dev Center fails to provide accurate information as it only mentions Titanium Mobile app.js and does not speak of index.html in the application structure.
After some starting experience on Titanium Mobile, I had to work on Titanium Desktop andactually just had the same problem as angel_ang, which brought me here.
So, here is the real answer :
Titanium Desktop applications do not need or start with an app.js file, but with index.html.
Deleting or removing this file never works as it will still be launched from the last build if need be.
Adding anything to app.js will never run as only index.html is run as a starting place.
Something that should have been a solution was found that to the following link:
http://www.youtube.com/watch?v=lgGVNB2nkKc&NR=1
This video is two online courses further from the link supplied by Aaron. At 0.19 seconds exactly, we see the starting code he has added to index.html.
You need to put a ... in your HEAD section, and add a function() there.
You may put the sample code inside this function.
Then you may even set the function to run when you click a button ().
Unfortunately, this doesn't work with me either.
I tried with the example code above but also with the other example (notification) mentioned in the online course.
It just seems that something is deprecated here and many documentations are outdated.
Anyone that could answer to this situation would be very helpful to us and many newcomers.
We just have an index.html that we can't use, instead of a running app.js file.