may I know how to change the image to the URL or link in react native? Below are the screenshot and the code:
The image can display at here but I want to make it become a link in attachment field here
Example of the URL or link: "http://exampleimage.jpg"
Here is the code
<TextInput
onChangeText={(attachment) => {
this.setState({attachment})
}}
placeholder="Attachment"
style={styles.input}
/>
{img}
<TouchableOpacity onPress={this.show.bind(this)}>
<Icon name="device-camera" size={20} color="black"/>
</TouchableOpacity>
...
show(){
pick((source, data) => this.setState({avatarSource: source, data: data}));}
I use the react-native-image-picker to do it. Please advise on how to do it. Any help will be appreciated. Thank you.
Create let variable in render block with.
Assign Image Url to let variable using uri .
Add Image tag in render’s return block.
Add Source attribute in Image tag and Assign Let variable name to it.
Add inline style to Image tag.
Related
I am currently working on a React Native App that involves images. I use the following code to display them:
//...
<View key={uriFromArray}>
<Image
style={styles.itemimage}
source={
{
uri: uriFromArray,
headers: {
Authorization: `Bearer ${graphToken}`,
},
}
}
/>
</View>
//...
On iOS, this works totally fine, on Android though, the images are not being rendered, neither on a virtual nor a physical device. Weirdly enough, images are being rendered if I copy the acutal token string to Authorization instead of using String interpolation to hand over the token.
Does anybody have an idea of what could be wrong? Thanks!
Try concatenating string before the component renders like:
const header = `Bearer ${graphToken}`;
Then pass it to Authorization key in the Image uri header prop
may I know how to display the image preview in React Native app? In iOS I was able to display if it is a http url but in the Android platform I cannot view the image as shown in the screenshot below:
The Running React Native App in Android:
The Image Preview in iOS platform:
In the code the attachment field is equal to this.state.attachment so can see the http url but when I connect it with the Image the image preview is blank. However if I hard code the exact http url address in iOS it can show the image.
//in iOS this one can show the image but Android cannot
let Image_Http_URL = { uri : 'http://localhost:3000/api/containers/container/download/FMS-SiteIcon_v2.jpg'};
//this one is both cannot but in url can show the http url address
let Image_Http_URL = { uri : 'this.state.attachment' };
<Image
style={{width: 200, height: 200}}
source={Image_Http_URL}
/>
<FloatLabelTextInput
onChangeText={(attachment) => {
this.setState({attachment})
}}
value={this.state.attachment}
editable={false}
placeholder="Attachment"
style={styles.input}/>
Please help and thanks.
this.state.attachment should not be enclosed in a string, try { uri : this.state.attachment }; or { uri : {this.state.attachment} };
I tried to display an image from a local file, so I try to do this
<Image
source={{uri:'../../assets/img_src/BTI.jpg'}}
style={{height:150,width:150}}
/>
my container component seems getting the height and the width but the image doesn't load. So I try this
<Image
source={require('../../assets/img_src/BTI.jpg')}
style={{height:150,width:150}}
/>
It works really well, unfortunately as far as I know I can't use this implementation if i want to manipulate the address file first and store it to a variable.
Example:
const imgSrc = `../../assets/${data.image}`;
where the data.image = 'img_src/BTI.jpg'.
I try to delete all the data on my android simulator in the android studio but the result is still the same. Am I doing something wrong? Is there a better implementation for this?
Thanks a lot :)
Not being able to require() a dynamic path is an intended behaviour of React Native, the packager needs to know paths in advance - see React Native issues
We had this problem in our project, we were storing image URLs on our DB and wanted to concat strings in the app to get the path to the locally stored image. As you've discovered, this doesn't work. You might find our workaround useful.
In our /images folder, we created a new images.js file which simply exported an object whose keys mapped to all our local image paths like so
export const Images = {
image1: require('./image1.png'),
image2: require('./image2.png'),
image3: require('./image3.png'),
};
Now the packager knew all the paths in advance and was happy. Then we added an imageKey to the DB item and used this rather than the absolute path. To grab an image we simply did
import { Images } from '../images/images';
// get your image key e.g. passed down through props
const img = Images[imageKey];
...
render() {
...
<Image source={img} />
...
}
Might not fit your exact use case, but hopefully you might be able to make some use of it.
I have about 100 heroes' image on local that need to import into the listview. This is my hero.js
renderRow(hero) {
return (
<View>
<View style={styles.container}>
<Image
source={require('./img/hero/'+hero.img+'.jpg')}
style={styles.thumbnail} />
<View style={styles.rightContainer}>
<Text style={styles.title}>{hero.name}</Text>
</View>
</View>
<View style={styles.separator} />
</View>
);
After some research I know require won't allow dynamic name. I also tried uri, no error but no image either.
{{uri: './img/hero/'+hero.img+'.jpg'}}
My folder structure is like this:
Project
index.ios.js
hero.js
img
hero
What is the best way to handle this, I don't want to put images on the network.
sahrens said the following on this forum
We intentionally don't support dynamically generated image names because it makes it very hard to manage assets over time, just like how you wouldn't want to do
It looks like it can be done via uri but it will require a bit of work. You will need to add your images in xcode assets and for android under res/drawable.
Then you can get your image with <Image source={{ uri: "image" + "name" }} />
I solved this issue in one way, just post my answer here in case others interesting on how to deal with this.
I wrote a php script to read all images in my hero folder and print out in this format:
heroName: require ('./img/hero/heroName.jpg')
<?php
$dir = "./img/hero";
// Open a known directory, and proceed to read its contents
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
$images = array();
while (($file = readdir($dh)) !== false) {
$keyName = str_replace(".jpg","",$file);
print "$keyName: require('./img/hero/$file'),". "<br />";
}
closedir($dh);
}
}
?>
Then I copy the result, paste into a js file and store as object like this:
export default heroList = {
name1: require('./img/hero/name1.jpg'),
name2: require('./img/hero/name2.jpg'),
etc....
}
Finally in my hero.js file:
import heroList from './heroList';
....
source={heroList[heroName]}
Hi as title suggests I need to save images to Android device from my CDN.
I am building app with React Native, and what I've done is that:
fetch('https://server.com/images.json').then((json) => console.log(json))
Which returns json:
{images: ["cdn.server.com/image1.jpg", "cdn.server.com/image2.jpg"]}
And now I really don't know what to do to save images to my device, because then I need to use them to open Instagram Intent (https://www.instagram.com/developer/mobile-sharing/android-intents/) and it only works if image is saved to device.
Any ideas?
I don't know react can using Java code.
I offen using this code to get image from url.
String imageCDN = json.getString("images");
ImageLoader imageLoader = new ImageLoader(this);
ImageView imgflag = (ImageView) findViewById(R.id.flag);
imageLoader.DisplayImage(imageCDN, imgflag);
But you should read this tutorial
At this code:
renderMovie(movie) {
return (
<View style={styles.container}>
<Image
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
/>
<View style={styles.rightContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text style={styles.year}>{movie.year}</Text>
</View>
</View>
);
}
You don't need to save image because memory leak, using ListView to clone all image in DataSource.