I've been trying to display an image using react from mongodb. I used multer to upload images and worked like a charm but my problem is, it seems that I cant output my image from the database. Heres my code.
<div className="img-preview">
{fields.dishImage ? (
<img
src={`localhost:5000/${menu.dishImage}`}
alt={menu.dishImage}
/>
) : (
<p className="image-text">
Image Preview <br /> Suggested Size 300x300
</p>
)}
</div>
The menu.dishImage contains something like this uploads/2020-07-15T09-13-56.569Zcovid palette.jpg
And I am getting an Error like this
GET localhost:5000/uploads/2020-07-15T09-13-56.569Zcovid palette.jpg net::ERR_UNKNOWN_URL_SCHEME
When I am opening that path from another tab I am seeing that the image is being shown.
Please add http:// in your url.
For example,
src={`http://localhost:5000/${menu.dishImage}`}
Ideally, You should use base_url from config so that you can use dynamic URLS.
Also, Use relative URLs instead of Static URLs
Actually you can try this alternative approach,
PS: You have to alter your code a bit for this method,
if you are working with big files greater than 16mb please go with gridfs and multer, else you can try this
( changing the images to a different format and save them to mongoDB)
If your files are actually less than 16 mb, please try using this Converter that changes the image of format jpeg / png to a format of saving to mongodb, and you can see this as an easy alternative for gridfs ,
The main goal is to convert the image to another format and then store them in mongoDB
i have put up a complete guide in this github repo, please to check them,
please check this github repo for more details..
Related
I try to import an old typo3 v4 into v10 and I'm using external_importer extension for the job. On the flow I would like to download the internal files like PDF and relink in bodytext.
The idea would be to transform the saved content to real html and evaluate the hyperlinks if are containing relative PDF links and in case trigger the download and rebuild the link to the file.
How would I proceed in this case?
I tried the following
$parseObj = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(ContentObjectRenderer::class);
$html = $parseObj->stdWrap_HTMLparser($htmlStr, []);
DebugUtility::debug($html);
but the hyperlink steel remains as <link http://someurl.com>
I had a similar problem. If the solution is the same with mine, you are halfway there. You are missing the reference. Meaning, how should TYPO3 process the text. Here is what worked for me.
TYPO3 render full t3:// links from bodytext in utility files
First, use the parseFunc and not the stdWrap_HTMLparser. Then use this reference: lib.parseFunc. At the end you should have something like that:
$parseFuncTSPath = 'lib.parseFunc';
$html = $parseObj->parseFunc($htmlStr, [], '< ' . $parseFuncTSPath);
DebugUtility::debug($html);
And since you are using TYPO3 10, i would recommend to use DI (Dependency Injection). You can basically copy paste the code from the linked SO answer i pasted.
Best regards
I'm developing a React App, and I have a backend in NodeJS.
In my Mongo Schema I have an array that stores multiple strings, these strings are some images.
I saved them as base64. Now I want to display them in my app, works perfectly fine with src from img tag, but I want to create a button that allows the user to download those pictures, is there any solution to this? Can I convert back that string and make it downloadable? Thank you very much for you time, I'm waiting for your ideas!
Note: The examples in the snippets will not work live because Stack Overflow sandboxes snippets without allow-downloads, but they should work on your page.
Depending on your exact use case, you have different options. The easiest one would be using an <a> tag with the download attribute instead of a button, like this:
<a download="myImage.gif" href="data:image/gif;base64,R0lGODdhEAAQAMwAAPj7+FmhUYjNfGuxYYDJdYTIeanOpT+DOTuANXi/bGOrWj6CONzv2sPjv2CmV1unU4zPgISg6DJnJ3ImTh8Mtbs00aNP1CZSGy0YqLEn47RgXW8amasW7XWsmmvX2iuXiwAAAAAEAAQAAAFVyAgjmRpnihqGCkpDQPbGkNUOFk6DZqgHCNGg2T4QAQBoIiRSAwBE4VA4FACKgkB5NGReASFZEmxsQ0whPDi9BiACYQAInXhwOUtgCUQoORFCGt/g4QAIQA7">Download GIF</a>
If you need to keep using a button and you want to trigger the download programmatically, you can create an <a> tag (without displaying it) and trigger a click:
const a = document.createElement('a')
a.download = 'myImage.gif'
a.href = 'data:image/gif;base64,R0lGODdhEAAQAMwAAPj7+FmhUYjNfGuxYYDJdYTIeanOpT+DOTuANXi/bGOrWj6CONzv2sPjv2CmV1unU4zPgISg6DJnJ3ImTh8Mtbs00aNP1CZSGy0YqLEn47RgXW8amasW7XWsmmvX2iuXiwAAAAAEAAQAAAFVyAgjmRpnihqGCkpDQPbGkNUOFk6DZqgHCNGg2T4QAQBoIiRSAwBE4VA4FACKgkB5NGReASFZEmxsQ0whPDi9BiACYQAInXhwOUtgCUQoORFCGt/g4QAIQA7'
a.click()
(If you need to support older browsers, you may have to temporarily insert the tag into the DOM and trigger the click in a setTimeout(..., 0).)
You can also use object URLs like it's shown here but it's probably easier to go the data URI route since you already have such a URI.
I know there are several options where to store and how to serve images in react.
two options are:
store the image in public folder and then use it like this:
<img src={process.env.PUBLIC_URL + '/someImage.jpg'} />
store the image somewhere else in the project, import it and use it like this:
import image from '../../assets/images/someImage.jpg'
<img src={image} />
I need now to create an img tag with srcSet with few images that the correct size will be shown according to screen width.
In order to avoid adding many lines of code (4 or 5 sizes for each image) for importing the images as I do today (I am using the second method as described above), I think maybe to move them to the public folder then I wont need to import many versions and also mention all those versions in the srcSet.
My question is
what will be the differences between serving images using the first vs the second methods I wrote above?
and which option will you work with?
in case you have many images and want to set srcSet with few versions to each image?
In my Angular 5 application, I am retrieving data which is stored as VARBINARY(MAX) in SQL Server database. It looks like this in the database field: 0xFEA47E451A40AE4571E51F...
When I retrieve it from database using a GET call via .NET WebAPI, it is shown like this in console from my Angular app: aFwwbUYFjhvbv=bhBGVJHvchjhcbsHKfvHbbh...
I know the MIME type of this data (it is either MP3 or WAV). How can I parse/read this data in Angular 5 client and play it using an HTML <audio> component?
I have looked at several related solutions but none seem to be applicable due to one error or another, or perhaps there is a lack of understanding on my part.
My assumptions are that Blob data has the audio content which I can play. I have to convert it to a File first. This is what I am trying:
const file = new File([blobData], "audio.mp3")
this.audioSource = URL.createObjectURL(file)
And in the HTML, I assign audioSource as the source of an HTML5 component.
<audio [src]="audioSource" type="audio/mp3"></audio>
This results in a net::ERR_UNKNOWN_URL_SCHEME error.
I tried sanitizer.bypassSecurityTrustUrl(this.audioSource) as well but this doesn't work either. What am I doing wrong, and how can I get the intended effect?
please check this answer : https://stackoverflow.com/a/40329529/1160236
if you have blob data with correct binaries all you have to do is to create URL using URL.createObjectURL(blob) then pass it to the audio tag as a source. (check step-3)
if you don't have blob data with correct binaries you can create blob data as shown in step-2.
I have created an Angular example which uses DomSanitizer via a custom pipe.
<audio [src]="audioSource | safe:'url'" id="audio" controls #audioTag></audio>
Reference : https://stackoverflow.com/a/40329529/1160236
Angular implementation using reference : https://stackblitz.com/edit/angular-audio-blob
DomSanitizer example: https://medium.com/#swarnakishore/angular-safe-pipe-implementation-to-bypass-domsanitizer-stripping-out-content-c1bf0f1cc36b
I hope this will help. just remember all you need is valid blob data.
I'm using fetch to retrieve data from an API, it returns an image in base 64 string format. How can i convert it in to a normal image and show it in a web page using react?
Try to use
<img src="data:image/jpeg;base64,{base64imagestring}" />
Try to use:
<img src={"data:image/png;base64," + Data.Photo} />
this was the solution that worked for me...
I think following information might help you.
So, base64 encoding has encoded binary information into textual data and to decode it back you can use - atob
To show it in a web-page using react - you may consider to use "img" tag itself, as suggested by #tico in comment using data-uri.
In general data uri, let you put your image( and other data) in the form of url.
So, simple steps would be -
1. Fetch the base64 encoded image.
2. Make a data-uri.
3. Load the source into the image tag, using state preferably.
4. And you are done!
Hope this helps.
use this below, make sure there is no comma in between them
<img src={"data:image/png;base64" + base64encodedimg } />