I am building a system which will contain database of images. There are about 1 million of images, 1Tb total size. All images are located in some directory C:/path/to/image/store on local disk.
We do have a rest api and database which contains important info about all those images. user can query the rest api, submit some criteria about those images and they receive a response in form of json object:
{pathToImage="C:/path/to/image/store/data/somedir/abcd.jpg"}
Now we have a React client which needs to display the image.If we put simply:
<img src="C:/path/to/image/store/data/somedir/abcd.jpg">
it will not work. Browser does not allow to display local files. We can bypass it by placing the entire image storage under react public directory and then to refer to files by:
<img src={process.env.PUBLIC_URL + '/image.jpg'}>
but we simply cannot move the directory with images around. It is to big and it is used by other applications as well.
Please do not lecture me that web browsers do not allow displaying images from local filesystem due to security considerations. I am perfectly aware of this - and I do not care. In my use case security is a non-issue. We are not concerned by it. I will not explain why, just take it as a fact: The security considerations why chrome does not allow to display images from local file system do not apply here. Period. We want to display the images.
So here is my question: Is there ANY way to configure React or chrome to tell it: "This directory is public, you can safely serve any images from it to the client"?
Related
I have a bootstrap input field for images in my react app. When I upload an image through it, I want to get a public URL of that image so that I could reuse it in another part of the app.
<div class="mb-3">
<label for="formFile" class="form-label">Product Image</label>
<input class="form-control" type="file" id="formFile">
</div>
I've seen people connect to an API like google drive and upload the image to get a kind of shareable link. Is there a way to do that on the client side?
Thanks for the notice :)
Using google drive as a backend is one solution, their API is a good starting point. In general IMHO you want to explore the "serverless" concept. Amazon has a lot of services available in this area.
No, you have to have a publicly accessible system to serve images. That means a server.
I can't think of any way to come close this without involving some kind of 3rd party system/server. Even if you were to do something as involved as a peer-to-peer system of sharing images over WebRTC, you would still need a signalling server to make the initial connection between clients.
The way that apps work with content sharing in a generalized manner is that a user will upload an image on the front-end to some content repository. That could be your own content repository or some 3rd party site like imgur, Google Drive, etc. Once it's uploaded, a link to that publicly available content is stored by your own application and then used in some way such as being shown on a user's content board or profile.
For example, Stack Overflow itself integrates with Imgur so that whenever you need to upload an image to go along with your question/answer it is associated to your post and hosted out of imgur. SO still has to plumb all associated stuff like knowing who uploaded what and what question it's related to where to put it in the post.
Providing a complete solution would be too broad, but a possible, birds eye view could be something like:
Serve front-end however
Serve back-end that has content accepting mechanism (maybe something like Strapi
Hook the front-end up to use the content accepting endpoint
Have a main page that just shows all the images that have ever been uploaded
Bear in mind, that it's rather complicated to do all this and curating content is also a HUGE endeavor whenever you have to deal with people uploading illicit content.
I have an e-commerce react app, so as you know every product has at least three or four images, so to show the image of product in my website i created a folder with a name of " images " inside the public folder so everytime i want to show images of a specific product i can get and show them very simply and for Now this is very very awesome.
The Problem:
as we know each e-commerce website should have an admin where he can publish new products and upload new images, so by the time may be i will have thousands of images in my website.
Question
what is the best practice to store images of my react app ?
do i need to use third party like AWS or Firebase ?
Thank you.
Storing images in the code-base assets folder is not the best option for large number of images. Handling updates, inserts is a big problem. So you have the following options.
Options: Cloud/On Premises
You may store in the cloud like AWS S3
If you want to store on premises, you may store in MongoDB Grids
or even on the File System with file-path stored in the database.
Step Ahead
But going ahead you might need responsive images according to the image placeholder. Example for an image you might need thumbnails of different sizes lets say for listing pages, android apps, iOS apps.You might also need to compress the images in case they are heavy for web purpose.
In that case you may choose to store the images in the desired
resolutions.For this you'll have to store multiple versions on an image. For example product1/original.jpg, product1/compressed.jpg, product1/300x300.jpg etc
You may resize/crop the images on the fly. If you want to write your resizing systems you may write ImageMagick/vips/PIL etc based code.You may try to search for readymade nginx based plugins to server responsive images.
If you do not want to do this resizing stuff yourself you may use image storage services like imgix,cloudinary,akamai that provides CDN + image manipulations.Some of these provide storage+manipulation while some only manipulation.
I'm building a web application that is supposed to take files from wherever in the LAN and display the content of those files. The application also uses a javascript library for generating embed objects to preview the files, if they are pdf.
The problem is that i can not successfully seem to link to those files, be them images, documents or videos.
The url is either formatted by Google Chrome by prefixing it with the address to the local web page, or interprets it as a local file and denies access to load it, or throws a connection time out if i manually prefix the file urls with http://lan-server....
As I said i tried formatting the urls to these files (the ones on the lan machines) in different ways, but none of them work.
Here is an example of an to a file in LAN
http://is-something/Subfolder/test/image.png
This one gives a timeout error
Here is another one
\\is-something/Subfolder/test/image.png
This one is prefixed with the address of the current webpage (http://localhost...)
I also tried using file:// way to access the files but it seems this only works for the local machine
So what i would want is a way to acces the files that i spoke about.
I need to use them in html elements for the src attribute, as well as in the css rules (for background url).
I want to upload the image in my website. The same image will be shown in another website. So this is the scenario where image is uploaded in one website and displayed in both website. These two websites are hosted in two different servers as well as they both have their own database.
I am using Angular JS, Entity Framework, Web API and SQL Server 2014 as backend for both of the website. Currently I am using ngFileUpload to upload the images. Please answer me on below questions:-
Should I upload the image in database(as nvarchar-max) or filesystem(FTP or local web server file system)? I read many articles and get to know that Database retrieval of image has affect on performance but it is more secured. However File System is easy in performance but complex on maintenance like back ups. So I am just not able to decide which to choose among these two as both have pros and cons. Which option will be more suitable to my requirement where same image will be displayed in both website. Please note that there can big images like upto 5 MB uploaded in the application but the number of images will not be huge as compare to any social networking or online shopping site.
How to create different size of images(thumbnail, medium, large etc) automatically upon uploading of image in website? Is there any tool or directive already available in Angular JS to achieve this?
I know my question is broad but I need suggestion to start with my requirements.
Please help.
I use the file system to host my images. If the image is displayed on someone's computer screen, they can use an image capturing software to copy it anyway. Also, while storing them to a database may be more secure, I don't need the extra overhead in my code where a simple url to retrieve the image will suffice.
As for resizing an image using Angular, check out these links:
https://www.scientiamobile.com/page/angular-image-resize
https://github.com/FBerthelot/angular-images-resizer
I am writing a program in C that acts like a proxy server in a Linux system: Client asks it for a web page,
it sends an HTTP GET Request to a distant server, and it gets the servers response (web page), which is saved in an .html file.
Here goes my problem: Most web sites got some references to images, so when i try to view the .html file proxy created, the images don't appear.
I have searched a lot, but found nothing..Is there a way to write some code to GET images too?
Thank you in advance
You're going to have to write code that parses the HTML file you get back and looks for image references (img tags), then queries the server for those image files. This is what web browsers are doing under the hood.
You have an additional problem though which is that the image references in the HTML file are to the original server. I'm assuming that since they don't load for you the server that returned the original HTML isn't available. In that case after you get each image file you will need to give it a name on the local filesystem and then alter the reference in the HTML (programmatically) to point to your new local image name.
So for example:
<img src='http://example.com/image1.png'>
would become
<img src='localImage1.png'>
If you're querying arbitrary websites then you'll also find that there are various other files you'll need to do the same with like CSS files and JavaScript files. In general its hard to mirror arbitrary web pages accurately - browsers have complex object models they use to interpret web pages because they have to deal with things like CSS and Javascript and you may need to be able to 'run' all that dynamic code to even be sure what files to download from the server (e.g. JavaScript including other JavaScript etc).