I am loading image from http url inside tag.
However, I have updated the image from backend but on mobile device I am not able to see updated image.
It's always showing me the old image.
When serving the image from backend, add a timestamp attribute to the image url as a query param, i.e <image_url>?t=12233554.
You can fine-tune this method more -
like when storing the image, put the timestamp for that time only as a query param, and directly serve the file to the user.
Related
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.
I am connecting Active Directory to a platform my company uses. In order to ensure that user's have a profile picture, I will add the URL of the photo to an attribute and connect it that way. However, the URL for the image must take me directly to the image. So far, I have been able to store images on different options but for each one, when I select the URL, it takes me to the webpage that disples other items than just the image (e.g. - https://ibb.co/J2cFfsx ). How can I store photos so that the URL takes me directly to JUST the image ONLY?
right click on the image and click view image. once you have done this you should get something that looks like below. In the URL there should be a new link, if you use that one it should always take you to the image aslong as it exits.
Equally you can right click on the image and select "copy image location" and that will give you the new link. I personally perfer the other method as it gives a proper preview of the image at its full size.
new image view
To link your image to the document go and search for image on google. right click on image -> Create QR code for this image after showing the QR code. Beneath QR code there is a link copy that and paste it in your document where you want. Now just to be sure click on the link and it will show the image only. Try it!!
I am using react and redux for my application. I have to build one functionality where all text data will be loaded first and then images. I would like to know how to load text data first then images while fetching data from endpoints. Till images are not there I want to show gif images.
In the success callback of the api call to get the text, get the images.
I'm using angular and the Parse.com REST API. When save an image I received the status code 201 with a name and url, but when I try to get image from this url, I get a broken image.
By example this url: http://files.parsetfss.com/e70a8a0f-f675-42e4-8b15-117a6ad959c5/tfss-ccdd1f71-86aa-41fc-86c4-1f0c67e74974-aa-music-blank2.gif
I would be use another way to save images in parse?
in my angularjs app.. trying to reupload an profile image.. image is getting uploaded successfully but bcoz of cache problem it is showing previous uploaded image only..
for that i have tried..
$templateCache.removeAll();
$state.reload();
$window.location.reload();
even i m appending current timestamp after the image url
its not working
if m using $timeout then my problem is solved but that is not good user experience..
I need some better solution for that.. help me out
even in headers we are using
cache-control: no-cache
i solved this problem by appending some random string to image url itself (not after image url) on every new upload.. you can append current timestamp also..
for me current timestamp was creating problem bcoz it was creating inconsistency while image processing.