I want to reference my img tag src to the outside of the app, for instance from a local hard disk is it possible?
in addition, in restful API how should reference img src to backend upload image folder.
If you reference an image outside of the app, you will be constrained to use full URL with domain (ex : https://google.com/your-path).
In the case of an API, you can either use the full URL, or you can pass only the relative path (/your-path) and add the domain (https://google.com) as a variable in your frontend file (for example by fetching it from environment vars).
On your hard drive you can simply use something like
<img src={"../path/pictures/image.jpg"} />
With an API, you need to get the data and an url from where your image is stored. Be it on the local hard drive of your server (which means you need to do something on your backend to serve the images) or a https:// url.
Once you fetch your data from the backend, you can simply reference it in the <img/> balise.
<img src={state.url} />
If you're using Create-react-app you could learn here
well , I solve problem . in fact i convert imag file to strng like this :
String filePath = HostingEnvironment.MapPath(#"~/Images/"); //read file from directory
var imageString = System.IO.File.ReadAllBytes(filePath + obj.foodImage); // read file as string
Transfer.Image = imageString; // and pass to byte variable
Related
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..
I have successfully integration the google drive sync by using this link has the source code
And now I am not able to upload image with its name id and location,
I want to upload image with some other fields like name, height, width into the app specific private folder,
If this is not possible can any one suggest me how to go with this:
Actually I have to sync application list data in which list contains images, title, comments ratings and so forth. I am able to upload all other fields except images in json formate, any suggestion upload some type of approach to get this
Found the solution
It is not proper solution but till I am not getting the exact solution, perfect for me.
To upload image with other request data, I have followed following steps:
Convert the image into data using one of the following way
Swift 4
let dataObj = image.pngData()
Swift 3
let dataObj = UIImagePNGRepresentation(image)
And convert this data objet to string with utf8
let str = String(decoding: data, as: UTF8.self)
Use this string to upload with other requst param or data.
And don't forgot to mention the type with this, so that you can easily convert this string to data again and from data, image easily can convert.
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.
So Im building a Reactjs project (still learning) and I was wondering if its possible to define a constant that can then be used in other files to determine file locations. eg:
IMG_ROOT = /images/
I could then use this whenever importing an image. eg:
import IMG from IMG_ROOT + filename.jpg
Is this possible?
Using CakePHP 2.6.7
When generating a PDF using wkhtmltopdf I can simply run from the command line wkhtmltopdf http://url/of/my/website some_name.pdf but I can find no way to pass a URL in this manner through CakePdf when using the Wkhtmltopdf engine. The closest I can get is using file_get_contents(http://my/website) and then manually going through the result and turning relative URLs for stylesheets/scripts into full URLs.
Is there a way to pass a URL to CakePdf? Alternatively, what would be the best way to go through a load of HTML and turn the relative links into full ones?
Partial Solution
For the moment I have managed to use the following code to manipulate the links on the page and replace them with the full urls.
$parsed_web_address = parse_url($this->request->data['ArmawareHtmlToPdf']['web_address']);
$root_web_address = $parsed_web_address['scheme'] . '://' . $parsed_web_address['host'] . '/';
$html_string = str_replace('href="/', 'href="' . $root_web_address, $html_string);
$html_string = str_replace('src="/', 'src="' . $root_web_address, $html_string);
No. As far as I'm aware you can't pass a URL through CakePdf. The entire purpose of the plugin is to convert html generated from your Cakephp app to wkhtmltopdf. So it wouldn't make much sense to pass a url to a external html source.
My suggestion would be to use wkhtmltopdf directly using proc_open(). Take a look at the WkHtmlToPdfEngine.php file in the CakePdf plugin for an example of using this with wkhtmltopdf.
http://php.net/manual/en/function.proc-open.php