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
Related
I'm showing images from resources/static/images/
The weird thing is if I give the path like "/images/milk.png", it shows the image but if I get name from ${}, it doesn't work.
<img class="card-img-top"
th:src="#{/images/${res.getLogo().getUploadFileName()}}"
th:alt="${res.getLogo().getUploadFileName()}" />
it seems res.getLogo().getUploadFileName() is working well. So it will be replaced like /images/milk.png. But it doesn't show the image...
How can I fix this?
One more thing, I know basic Thymleaf path is resources/templates, but how it recognize image when I gave like "/images/milk.png"
If u want to upload static images
th:src="#{images/} + ${res.logo.uploadFileName}"
if you want to upload dynamic images
th:src="#{https://~~~.com/} + ${id}
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.
In a phoenix project, I can reference digested img in a css file with:
background-image: url("/images/phoenix.png");
and that references:
http://localhost:4000/images/phoenix-5bd99a0d17dd41bc9d9bf6840abcc089.png?vsn=d
I would like to reference the same file, but the image src added with javascript, like so:
document.querySelector('#my-img').src = '/images/phoenix.png';
But this only references:
http://localhost:4000/images/phoenix.png
How can I configure the phoenix endpoint to instead serve the digested img file?
(I would like this functionality for updating cached file purposes)
Since you know the image file beforehand, you can have a javascript variable and set the value to the URL to that image file and use it later in your script
Something like this in your .eex template:
<script>
// using static_path(#conn, "/path/to/asset") will give the digested file url
var disgestedImageUrl ="<%= static_path(#conn, "/images/phoenix.png") %>";
</script>
Then have your script that uses the URL in your .js file
<script>
document.querySelector('#my-img').src = digesterImageUrl;
</script>
I am trying to show image at view from webroot in cakephp.
But I didn't get any image. Please help me;
Is this code correct
$this->Html->image('WWW_ROOT . img/upload/aswq.png', array('width'=>'200px'));
you can use in this way to show image from webroot folder. just notice that img folder already included path in html helper
echo $this->Html->image('upload/aswq.png', array('width' => '200px','alt'=>'aswq'));
Will output:
<img src="/img/upload/aswq.png" alt="aswq" />
let me know if i can help you more.
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.