How to fetch image inputstream in angular 6 - html

this my component.ts code
this.allMeta.getProfilePictureUsingMediaId({
"SessionID": "dswesfgdgfdgf12463",
"MACAddress":"1235874"
"MediaID":this.userProfilePicture
}).subscribe(
data => {
console.log(data);
this.profilepic=data
}
);
below is my service code,
getProfilePictureUsingMediaId(pjson){
return this.http.post(this.profile + 'getProfilePictureUsingMediaId', pjson)
.map((data: any) => data.json());
}
<div style="height:240px" class="row">
<img id="ItemPreview" [src]="'data:image/jpg;base64,'+profilepic" />
</div>
Below displaying data I am getting from server, how to make it visible same image in my web app, beacuse after calling server in service, i got data value undefiend.
����JFIF��C
#%$""!&+7/&)4)!"0A149;>>>%.DIC
<H7=>;��C
;("(;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;��"����=!1A"Qaq2B��#R�$���3b�Sr�����C����%!1AQ"a2���?B�vϚ���8���\J3��y�A�l9fv��k�<�H�R�{\n��&���T��q�k���h$Yau;�����p���x�������nN�q��RWcp����h�~f}�8#�$�&���$Tn;�6Is�X�"#C��n-ߦϳ��k8�c��)�V���b�Y�\p��Vҍ�fp�'I��S�.4%�Xx����9�S+F������|2D�F՗�d%�F��UlS��NkEL�VP
�0k�Lr�RRA'�]���禣`���DX��,Hc[�)nO�����i��Ow�sC��";9����-�é2�
Sorry I don't know how to send this data so I am using html to show u this picture and also it is not complete data.


Use
<img id="ItemPreview" [src]="imageVariable" /> . in your html
and use an imageVariable in ts file like this
imageVariable="`data:image/png;base64,"+ yourBytestream
Here is a working solution:
stackblitz

Related

React Drag Drop Html File Parse Into Json

I am making this post, as so far with my React program, I have used React Drop-Zone to create a drag drop place, but what I am trying to do is when a local html file is button submitted, I want it to go to a specific / then grab the data from the new local / url.
I'm wondering whether this is possible with just React, or will I need to use Express to create a server, so on submit it uploads it to finish the task?
Upload Local Html File > go to specific / > once inside grab data from page.
Is this possible? or is a API needed?
import React from 'react';
import { useDropzone } from 'react-dropzone';
function DropZoneComponent({ open }) {
const { getRootProps, getInputProps, acceptedFiles } =
useDropzone({});
const files = acceptedFiles.map((file) => (
<li key={file.path}>
{file.path} - {file.size} bytes
</li>
));
return (
<div className="container">
<div {...getRootProps({ className: "dropzone" })}>
<input {...getInputProps()} />
<p>Drag The Html File Here</p>
</div>
<aside>
<ul>{files}</ul>
</aside>
</div>
);
}
export default DropZoneComponent;

Getting Data from JSON with React gives blank page

The purpose of my React one page app is just to render JSON data from another Drupal app. My app shows no error in rendering, but I am only getting a blank page both with Fetch and AXIOS. I have tested the JSON on Postman and also from the Drupal site URL and it works. Please can you tell me where I have gone wrong.
And here is my React mapping component. I am using Fetch in the App.js
import React from 'react'
const Posts = ({ posts }) => {
return (
<div>
<center><h1>Articles Post List</h1></center>
{posts.map((post) => (
<div class="article">
<div class="article-body">
<h5 class="article-id">{post.node.Nid}</h5>
<h6 class="article-title ">{post.node.title}</h6>
<p class="article-text">{post.node.Body}</p>
</div>
</div>
))}
</div>
)
};
export default Posts
And here is the structure of my JSON feed:
Drupal json feed screenshot

Displaying HTML Body on a page using ReactJS

Say I have the following code in my database (user input):
<html>
<title>Test</title>
<body>testing website</body>
</html>
And I fetched it correctly from my database using ReactJS. How can I display this in say: 'localhost:3000/play'? I don't want it to be rendered as raw data just like the code but I want it to actually render the html body as a website. (Title set to Test, and displays a small text: testing website). How can I do that in ReactJS? I already have /play configured and I just want to know how to display it there in the index.js file. I tried something like <div dangerouslySetInnerHTML={template} /> but it didn't work.

So, I fixed it with the following:
In a separate function:
db.getHTMLBody(key).then(snapshot => {
this.setState({ body: snapshot.val() })
})
then in the render:
<div dangerouslySetInnerHTML={{ __html: this.state.body }} />

Please try :
const innerHtml = { __html: escape(snapshot.val()) }
return(<div dangerouslySetInnerHTML={innerHtml} />)

Vue - i am trying to display an image from a url from an array but the image is not displaying

this is one of my first projects with vue.
Basically, I am trying to display an image from a URL from an array.
On the webpage, the URL is in the image back but the actual image is not displaying.
This is in my main vue class
<div id="painting">
<ul v-if="artwork && artwork.length">
<li v-for='(artworks, index) in artwork' :key='index'>
<img v-bind:src="artworks.thumbnailUrl" />
</li>
</ul>
<router-view/>
</div>
then the script code:
<script>
import axios from 'axios';
export default {
data() {
return {
artwork: []
}
},
created() {
axios.get(`http://localhost:9000/artwork`)
.then(response => {
this.artwork = response.data;
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
This is what it looks like on the web, the url is there but no picture
I have declared a width and a height of the image as well with css
I should mention i getting the information from the database in a node project and connecting by a port number
I am pretty new to stack so I would love any feedback, cheers

From you screenshot code, this looks fine. I can see the image by writing similar HTML
<li>
<img data-v-xcxcc src="http://www.tate.org.uk/art/images/work/A/A00/A00007_8.jpg" />
</li>
https://jsfiddle.net/y2m75usk/
Try clearing your cache or reload the page by Holding the Ctrl key and press the F5 key.
Thanks!

Load PDF in modal with Laravel routes and vuejs axios

I am trying to generate a PDF and open a modal on button click.
In the modal the generated PDF should be loaded in the DOM.
To generate the PDF I use axios:
axios.post('/preview', formData)
.then(function (response) {
this.previewPdf = response.data;
}.bind(this));
The generated PDF name is returned in the controller and saved in the this.previewPdf variable.
Then I use laravel URL wildcards to load the PDF in the modal.
<div class="modal-body">
<embed :src="'/preview/' + previewPdf" width="100%" height="600" type='application/pdf'>
</div>
And the controller for the route /preview/{pdfname} returns the PDF.
return Storage::disk('local')->get('temppdf/' . $pdfname);
However if I open the modal the PDF seems to be loaded (Network preview):
%PDF-1.7
%����
2 0 obj
<</Type/XObject
etc.
But the modal just shows an empty <embed>. Although the src of it is correctly src="preview/pdfname.pdf".
What could cause this issue?

I found the solution for my problem.
In the controller where I return my PDF I needed to return a header.. The content-type without the header before was just html.
With this line of code it works:
return response(Storage::disk('local')->get('temppdf/' . $pdfname), 200)
->header('Content-Type', 'application/pdf');