My React Native 0.63.2 app will show images stored in cloud storage with code which is similar to below
<View style={styles.container}>
<Image
style={styles.stretch}
source={{uri:'https://filefolder.download-only.com/image1.jpg'}}
/>
</View>
The problem is that this https://filefoler.download-only.com/image1.jpg only allows to download file to local disk before opening it. One option I can think of is to download and save the image in a temp file locally and display it with source={{uri:file:///path_to_image_file}}. But this option would require explicit downloading of each image even before user clicks and opens it. Is it possible to make the download-only image behaving like a click-able image url? Ex, add "data:image/jpeg;base64," before download-only url (something like source= {{uri:"data:image/png;base64,"+"https://filefolder.download-only.com/image1.jpg")
Use rn-fetch-blob for this: https://github.com/joltup/rn-fetch-blob
Fetch image as a blob
Convert blob to base64 to display image, use following code to convert blob into base64
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
console.log(base64data);
}
After ran some test code with a URL copied from the cloud storage, it turns out that the image can be displayed by <Image> as usual with the URL. There is no need to prefix the image path as we did for stream data.
<View style={styles.container}>
<Image
style={styles.stretch}
source={{uri:'https://filefolder.download-only.com/image1.jpg?expires=xxxxx&signature=xxxxxxxxxxxx'}}
/>
</View>
Please be noted that in browser the url (contains the authorization signature) only allows download the image to local file system. <Image> tag however will download the image first and display it in render view.
Related
Using the image-picker module I grab an image successfully,
URL: /storage/emulated/0/Screenshots/Screenshot_20180624-232124.png
Now that I have an src I tried to apply it.
//Url is the url above^
url = url.substring(0,url.length-4);//removes the .png or .jpg from url.
page.getViewById(`myImg`).src = `res:/${url}`;
Which doesn't apply it. I just get the error: pasted at pastebin
and image doesnt change.
What am i doing wrong? I have looked at the docs on both the module and the NS docs.
you can directly use the image path you get from image-picker module by setting it as url.
<Image src={{url}}></Image> and url="/storage/emulated/0/Screenshots/Screenshot_20180624-232124.png"
Welp I got some help from someone else.
by adding:
const imageSourceModule = require(`tns-core-modules/image-source`);
let img = imageSourceModule.fromFile(url);
page.getViewById(`myImg`).imageSource = img;
I didn't know about the imageSource property seeing as the docs use src
I have created a js file where an array contains multiple objects. Every object has an image path given. Using for loop, I am importing every object to my component. Everything works fine except the image. It's broken. It's not taking the relative path. I have stored all the images in a folder. Below is my code:
Data.js
export const dashboardUtil = [
{
title: "Posts",
count: 500,
image: "/src/images/1.png"
}
//rest of the objects
]
Component.js
let blocks = [];
for(let i=0;i<dashboardUtil.length;i++){
blocks.push(
<Col xs={12} md={6} sm={6}>
<div className="main-block" className="stats-block">
<h3>{dashboardUtil[i].title}</h3>
<p>{dashboardUtil[i].count}</p>
<img src={dashboardUtil[i].image} />
</div>
</Col>
);
}
image: "/src/images/1.png"
This is not a relative path, its absolute (starts with slash). If you intend it to be relative, use ./ e.g. ./src/images/1.png.
The bigger issue is that you're providing a path to a local resource to the context of the users browser. It expects this to be a http(s):// resource. You need to provide an endpoint that your web server handles and serves up the resource.
Either:
Your image needs to go into a location your web server can access, and you need to set the img src attribute to reference that location
You should look into webpack and a file loader plugin that takes a local image path via require(), and copies that to an accessible location.
use :
import image from "../pathToImageFolder/image1.png";
//path to image will be automatically constructed by webpack
<img src={image}>
I've a ploblem with image Source and Obj's parameter.
Inside the local object I have IMG_NAME: 'A.png' like so:
I would like concatenate this value with source like
but I know require doesn't support concatenate so I decided ask you this question about the best way to solve this problem.
How can I try to solve this problem (my solve screenshot), and error image (Error reponse)
If you can modify the local object change to this
{
"id_letter": "1",
"name_letter": "A",
"image" require("./app/assets/images/A.png")
}
and then Component change to
<Image style={styles.letter_image} source={data.image} />
Edit Another Method use switch case statement
require not support dynamic path. Use switch case statement to solve this
function getImage(img_name) {
switch(img_name) {
case "A.png": return require("./app/assets/images/A.png");
case "B.png": return require("./app/assets/images/B.png");
}
}
<Image style={styles.letter_image} source={getImage(data.img_name)} />
I think there are 4 simple way to use a dynamic source in the Image Component:
1) You can use images that are already bundled into the app:
Images From Hybrid App's Resources If you are building a hybrid
app (some UIs in React Native, some UIs in platform code) you can
still use images that are already bundled into the app.
For images included via Xcode asset catalogs or in the Android
drawable folder, use the image name without the extension:
< Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
For images in the Android assets folder, use the asset:/ scheme:
< Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40,
height: 40}} />
These approaches provide no safety checks. It's up to you to guarantee
that those images are available in the application. Also you have to
specify image dimensions manually.
https ://facebook.github.io/react-native/docs/images.html#images-from-hybrid-app-s-resources
2) You can use require('imagePath') into the object.
{
"id_letter": "1",
"name_letter":"A",
"img_name":require('./app/assets/images/imgname.jpg');
}
3) You can storage the images in the web and you can use:
<Image source={{uri: 'http: //site.com/app/assets/images/'+data.img_name}}/>
4) You can storage the images using the library https://github.com/wkh237/react-native-fetch-blob.
I'm using JSF2.2, Tomcat 8 and MySQL DB to create a simple CMS. In my back pages I use Primefaces p:editor to create/edit my page content. I would like to insert an image somewhere into the text. It would be great if I could upload the image and insert it at the current cursor position. Ideally, the image should be saved as a blob, but if it's easier for the implementation it could instead be stored as a local file.
I can see that p:editor already has an option to insert a URL of an image, resulting in the <img> tag in the text. But I would really like the possibility to upload an image from my local drive. I haven't been able to Google anything useful so far.
this is how i did it:
.xhtml:
<p:editor id="editor"
widgetVar="editWidget"
value="#AnnouncementBean.text}" />
<p:fileUpload id="upload"
fileUploadListener="#{AnnouncementBean.uploadListener}"
label="Insert image"
mode="advanced"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
update="editor, growl">
</p:fileUpload>
An in my Backing Bean in the uploadListener after file upload:
String value = FacesContext.getCurrentInstance()
.getExternalContext().getRequestParameterMap().get("editor_input");
setText(value + "<img src=\"/uploads/" + result.getName()+"\" />");
RequestContext.getCurrentInstance().update("editor_input");
where "editor_input" referes to the actual form field submitted for the editor (PF adds the_input to the id of your editor)
Notice how I update the editor_input not the actual editor. Only problem now is that the image is appended to the end of the text. sou you must move it manually within the editor
You can use a string to receive the editor (or textEditor) value, then use regex to find all img elements.
This is my code.
String regex="<img src="data:image/(gif|jpe?g|png);base64,([^"]*")[^<>]*>";
Matcher m = Pattern.compile(regex).matcher(your_textEditor_value);
while(m.find()){
String imageFileType=m.group(1);
String imageDataString=m.group(2);
byte[] imageData=Base64.decodeBase64(imageDataString);
}
The imageFileType is your file type, and imageData is data of the file. You can use it to do other thing.
I've learned and implement successfully that how to upload images on server disk with servlet from Here and now trying to show the image on another jsp userProfile.jsp with the help of following code :
<img src="<jsp:include page='WEB-INF/jspf/profileImage.jspf' />" height="175" width="175" />
and code of profileImage.jspf is as follows:
OutputStream o = response.getOutputStream();
InputStream is = new FileInputStream(new File("../files/backPetals.jpg"));
byte[] buf = new byte[32 * 1024];
int nRead = 0;
while( (nRead=is.read(buf)) != -1 ) {
o.write(buf, 0, nRead);
}
o.flush();
o.close();
return;
but it does not works..
Any other ways to display the image from disk on jsp together with other matter on page?
I've saved my images on /files directories on the application root folder.
There are several serious mistakes in the approach:
You should not store the uploaded file in the application root folder. They will all get lost whenever you redeploy the WAR (simply because those files are not contained in the original WAR file.
The <img src> should not contain the raw image content, but it should contain an URL which returns the file content. E.g.
<img src="profilePictures/${user.profilePictureFilename}" />
You should not use JSP to write binary data to the response. Use a servlet instead. Or if you can, just add the path to uploaded files as another webapp context.
Here are several answers which should help you in the right direction:
How to provide relative path in File class to upload any file?
What is the correct path I need to see my uploaded image?
How I save and retrieve an image on my server in a java webapp
The syntax of an img tag is <img src="url_of_the_image" .../>. What you're doing is <img src="contents_of_the_image_file" .../>.
You need to generate a URL to a servlet, and this servlet needs to open the image file and send its content to the output stream. You can't download an HTML file and an image in a single HTTP request.