I have about 300 people wanting to view loads of images at a time but its not possible to download all the images to file. So i need a way where you can use a web url ("http://capes.reflexpro.co.uk/?user=" + p_177166_1_.getName()) to get the image to a path (string) without downloading.
Thx appreciate it
In order to view an image conventionally (i.e. through a web browser, image viewer, etc), you need to have a local copy of the image.
The image initially only exists at the URL you specify, or in other words, it exists only as a file on a remote machine. In order to view it, you need to download it to a directory on the client (i.e. local) machine. This is where the URL gets "converted" into a pathname - the pathname points to the local copy of the remote image. You can think of the URL as a path to the image as well - that URL string points to where the image is.
The reason we need to download a local copy of the image is because most images are stored in a compressed format (JPEG, PNG, TIFF). These need to be decompressed in order to figure out what color each pixel is. It's not efficient to do that on the remote server, so we transfer the compressed image, store it locally, decompress it, then display it. I have to imagine that most, if not all, web browsers will actually store the image on the local disk, partly to cache the image to ensure fast loading times for subsequent views of the same webpage, and partly to minimize RAM usage.
Related
I'm uploading images to s3.During every upload I'm storing two versions of the image. One resized compressed version and another original larger version.
Currently, I'm storing the original image's url in a database. The smaller image's url has the same url except the word "compressed" inserted in between.
I have a list() endpoint that returns both the urls (original- retrieved from the database; compressed- computed in the serializer)
This application is extremely read heavy. It's like instagram.
Should I just store the compressed image's url in the database as well or should I compute it?
you can just store the original size url in database. the other compressed url can be generated from the original one by program.
e.g.
the original url is
http://xxxx.yyy.zz/picture/123456.jpg
the compressed url could be
http://xxxx.yyy.zz/picture/123456_480p.jpg
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"?
I'm making an app with react native and spring boot for backend, what is the best way to save images? Is it fine to get compressed base64 string from image crop picker and save it in the database?
I test it and it works. I chose 10 MB image and when it saved after compressing, it becomes 182kb and i test the fetching speed and its fast. so is it fine to do that? If not, what should i do?
i know i should upload the image in a folder in the server and put the path in the database but then what ? In React Native you cant put path for image as variable like:
<Image source={require(x) } />
and x is the saved path in database, i know that the hole thing "require (/path/image name)" must be a variable to work but if i put in the database it doesn't work because it will be saved as string but it must be jxe to work so what is the solution?
Before trying to say this was answered elsewhere or is a duplicate - PLEASE fully read. All other solutions are cache-busters forcing image reload EVERYTIME. I only want to force image reload on condition of new image size - but keeping same image name.
On my server I am naming images ceLogo_C1001.png - the 1001 is the customer ID, the image is the company logo. If the client updates their image on the server side, the image is still named ceLogo_C1001.png.
<img ng-src='myserver.com/clients/images/ceLogo_C1001.png'>
However, in the app, the image isn't updating and is showing the old ceLogo_C1001.png - not the new one. I believe this is because the old image and the new image have the same name. Is there anyway to get the app to force reload the image if it recognizes the image size is different from the last one - even though the images still have the same name? I am trying to force a certain uniformity in naming...without having to add dates or incremental numbers (IE: ceLogo_C1001_1.png) to force a name change - which would then force an image reload.
Image cache refresh based on image size change is not possible. The purpose of cache is to store items by name so the next time the browser see's a request for that named resource it doesn't reload that specific item from the remote server - it pulls it from cache.
Therefore, if the url is pulling an image by the same name, one that was already stored in cache, it WON'T even request that image from the remote server. And if its not requesting the same named image again, there is no way for the browser to know the image on the server has a new size.
The only way to do cache busting (force reload an image that is already in cache) is to append something like ?ver=1 to the end of the URL. When ever the image is updated then increment the version number
image.png becomes image.png?ver=1 // this url gets cached In two
months a new image is uploaded, but the name stays the same, increment
the counter to: image.png?ver=2 this will force a reload and now
maybe this image stays the same, and in cache, for the next 3 month.
I am answering my own question and leaving this here in case anyone else ever tries going down the same path I just did.
My question is the next:
Situation:
I have an ImagesScreen where I can upload some additional photos, delete them, etc.
When someone add a new photo (from the gallery, react-native-image-crop), I want to make a copy from the image, save it to the local storage (so even if someone delete the image from the gallery I got my own copy in my local storage).
Why:
I do not want to immediately send the photos toward the API, I just want to backup them every day, so when I make a copy from the selected photo(s) I want to retrieve the uri of the local stored image. (not the uri of the image in the gallery)
How would you guys handle this case?
its complicated, try https://github.com/itinance/react-native-fs, is suitable for you.
there you can handle cached dirs, tmp dirs, delete files/save files