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.
Related
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"?
Hi I’m building a front end web app using reactjs, my app will map over different array of dogs/cats/animals with multiple props and a couple images each. The ui has a search box which then filters out relevant animals.
My question is if my list were to get quite large, do I need to have it stored in a back end ? Or can it all be stored in front end, there will be no sensitive information or anything. So im not worried about security. I do not need to receive any information from the users. Basically it’s just a website for people to browse through.
And my second question. Once deploying to a host, Im currently leaning towards AWS. Is updating/adding/subtracting from my arrays simple as deleting the file and adding the new one into the bucket ??
Sounds exciting! But let's first back up a bit, and take stock of what we're trying to do. Essentially: we want an app that will show a bunch of images with functionality (e.g. filtering).
All images/photos (e.g. this cat photo) are hosted somewhere. Period. So, you can be the one responsible for hosting the images, or you could just have <img /> tags in your react app and refer to an existing img src links, where the image sources are being hosted by someone else.
So to answer your question: my question is if my list were to get quite large, do I need to have it stored in a back end ?
Not necessarily - if you're just referencing a bunch of images from a site that someone else is already hosting, then you're good.
As for this point: Or can it all be stored in front end, there will be no sensitive information or anything.
This question is kinda hard to answer, because nothing is really ever 'stored' in the front-end (let's ignore caching). Images live on the server, and the client (e.g. your chrome browser) makes requests to the server to get the images.
Now: if you want to upload your own photos or let users upload their photos. That's a very different story.
You would want to use s3 buckets. They could host your images.
However, based upon your post, I really think you should start step-step, and not host your own images (i.e. not have a backend), and instead just start by using images already on the internet. Good luck :)
let me share my problem with you. To begin with I'm a junior-mid level web developer currently implementing a travel site. To deliver this I have a task in which I cannot find an efficient solution.
This travel site will be provided in different hotels. For each hotel, the main theme for the app will be different for example the background images, the colors of some buttons etc. My first suggestion would be to have the CSS files for each hotel and by reading the name of the hotel from the state to import the according css. But the hotels will be many and by using so many files my bundle file will be enormous which I don't need. Another solution would be sending all the colors and images from the server but this will have a use impact in my code and I will have to refactor it in so many places. The idea of the server is fine I think
But I want to use some theme template to makes these changes according to the server. Do you know something about that?
I think there is no need to send all the colors and images from the server. You can store all of it on a frontend part and get only a type from the server and apply different styles based on this type. Maybe this library can help you here.
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
Hello we have a non profit application built in Google App Engine for Java.
This application allows people to register as Blood Donors on our system.
As a result we want to email them their print ready e-BloodDonor cards.
What is the way to create such cards where we can define the design of the card and contents are filled dynamically based on registered data?
Please advise
You could create the layout in HTML, just like a normal view in your app, and then email them the link to that page to print it out. You could also go the much-more-complex route of generating PDFs or images for each user. PDFBox by Apache is pretty good for PDF generation.
I'd really recommend the HTML route, though, if it works for you. In my experience, it's much easier to do HTML layouts than it is to program PDF layouts in Java.