i have images in sqlserver as a binary, how can i display them in reactJs?
i tried the following but doesn't work
<Image source={{ uri: `data:image/jpeg;base64,${results.student_photo}` }} />
i also tried
const base64Image = {results.student_photo};
<Image source={{uri: `data:image/jpeg;base64,${base64Image}`}} />
This may answer your question.
How to display binary data as image in React?
Hope this helps.
Related
image code
I need to display some images from api. I am using axios to get images. ids of images is coming from another api one by one. if i use map it will show nothing . I want to show all images as soon as api send the id. map pnly works on loading i guess.
You can use ListView in React
example:
<ListView
dataSource={this.state.dataSource}
renderRow={data => (
<View style={styles.container}>
<Image
source={{ uri: imageSource }}
style={styles.img}
/>
<Text>{data}</Text>
</View>)}
/>
In react native, the <Image> tag isn't displaying properly and shows an image from a different src URL in the database. I checked the URL multiple times, and it isn't the one displayed in the HTML.
<Image source={{uri: image}} style={styles.image} />
What is causing this glitch?
Your browser caches your url and assumes you are hitting the same url so it populates previous result. Add a random query to the url like:
https://source.com/a/b/c/image.png?randomQuery={random_number_here}
Example:
https://i.pinimg.com/564x/62/ed/6e/62ed6ea71018a57a3ab0c8c959d78cb0.jpg?key=1656566265232
React native:
<Image
source={{ uri: `${imageUrl}?key=${Date.now()}` }}
/>
I am trying to render the avatar in my listItem in my React_Native Application but the image is not rendering even though my image URI path is correct and it's only giving the gray background.
Here is my code
<View>
{props.dishes.map((l, i) => (
<ListItem key={i} bottomDivider>
<Avatar rounded source={{ uri: l.image }} />
<ListItem.Content>
<ListItem.Title>{l.name}</ListItem.Title>
<ListItem.Subtitle>{l.description}</ListItem.Subtitle>
</ListItem.Content>
</ListItem>
))}
</View>
Here is the image of what I am getting
I want the images to be rendered there but it's showing only a grey background. I also tried putting the URI of online images but it's giving the same result.
I also followed the solutions mentioned here but it is not working.
I also passed the online uri to check if my path uri is incorrect but it the same result
<Avatar
source={{
uri:"https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg",
}}
/>
I solve the issue as passing the path of the image like this was not working
Bypassing an image path like this was rendering only grey background.
<Avatar rounded source={{ uri: "./images/uthappizza.png"}} />
This is how I passed the image path and its rendering properly by using require()
<Avatar rounded source={require("./images/uthappizza.png")} />
I tried several ways, until I found a guy who encouraged me to check emulator connectivity ... and that was the problem!!
To solve it, before running your app, launch emulator with
emulator -avd <your-emulator-name> -dns-server 8.8.8.8
I am adding two props (textProp & imgProp) to my custom component, but I keep on getting this error <Image> component cant contain children. This is what I have soo far
function TextImg(textprop, imgprop) {
return(
<div>
<div>
<Text>{textprop.text}</Text>
</div>
<div>
<Image source={imgprop.imageUri}>!</Image>
</div>
</div>
);
}
Can anyone help me regarding this, Thanks!
Images (img) are considered empty elements and are self-closing, and required to be per the html spec.
https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
The react native Image has the same restriction.
They can't wrap anything or have any children nodes. The "!" is the issue.
<Image source={imgprop.imageUri}>!</Image>
Try instead
<Image source={imgprop.imageUri} />
If you need to display an "!" then it'll have to be outside the image.
if you need to show "!" in image,
Try
<View>
<Image source={img} />
<Text
style={{
position: "absolute",
// some stylng
}}
>
!
</Text>
</View>
I've tried different methods to render an html content from json response to react native.But I got failed in these methods
https://www.npmjs.com/package/react-native-render-html
https://www.npmjs.com/package/react-native-htmlview
Because there is no package that support table tag of html. So I thought to use WebView in react native.But that also disappointed me. There is no field to give html content from json response in WebView. I've tried the following.
But these are not working
code
<WebView
source={{uri: `<h1>Hello World</h1>`}}
style={{marginTop: 20}}
/>
In my case I'm fetching server response.I've double checked whether response is coming ,the response from server is fine.
return (
<Container style={styles.container}>
<View>
{this.state.section.map(article =>
<View>
<WebView
source={{uri:article.data.description}}
style={{marginTop: 20}}
/>
</View>
)}
</View>
</Container>
);
Is there any other method for rendering html content other than these. Please I'm stuck with this.I don't know what to do.This cause delay in my project.So I'm really disappointed.Please any help would be really appreciable.
I've solved the problem.I was using native-base ui kit.So when I tried to render WebView within Container or Content it won't render.So I removed it with View component but ScrollView don't work.So I've made some changes to Container and it is working perfect.But still remains a problem that border of html table is not displaying.But otherwise it is perfect
This is my working code
<Content contentContainerStyle={{ flex: 1 ,padding:15}}>
{this.state.section.map(article =>
<WebView
source={{ html: article.data.description}}
javaScriptEnabled={true}
style={{backgroundColor: 'transparent'}}
/>
)}
</Content>