Hi everyone,
Using a Custom HTML web component to display an image from a specific directory, like this:
<div style="position:absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content:center">
<img src="https://exampleurl/directory/{COMPONENT."Some Panel"."Table 12"."Selected rows".Tables."Column Name"}.jpg"
style="height: 100%; width: 100%; object-fit: contain" />
</div>
If I replace the image file in the directory with a new one but keep the same filename, when will the image refresh in the component?
Do I need to manually clear some sort of cache, or is there a way to force the component to load the updated image?
Thanks in advance!
Hi Rafael,
The web component doesn't automatically refresh its contents. Once a (custom) webpage has been loaded, it stays the way it is displayed. The only way to display the new content is to reload the entire component. This can be done by reloading the dashboard or switching pages in LCAs.
If you keep the LCA page open, you will indeed keep seeing the old image. By reloading I mean refreshing the page in the browser or switching to another app page and back in the app to make the page with the Web component reload. Note that browser level caching can also influence the image you are seeing. Resources are cached by the browser based on their URL, so an identical URL may result in the old image still being shown.
Yes my question is actually related to that, sometimes even clearing the browser cache we see the old image for some users so we don't quite understand why.
Do you think forcing the url change in the app publishing the app and then put back the correct url would force the refresh ?
The browser cache is fully separate from the LCA. To force the image to be re-fetched, you can clear the cache. In chromium-based browsers you can do this by clicking on the three dots in the browser toolbar. Then click on 'Delete Browsing Data' and only select 'Images & files'.
Thanks for the quick answer Wout!
So to see if I understand correctly I have a image 1.jpg in that directory, if I replace that image with a new one called 1.jpg I will always see the old image ?
What do you mean by reload the LCA? Refresh the page in browser ? or republish the LCA ?