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'.
Hi Rafael,
In our LCAs, we sometimes extend the limitations by injecting JavaScript. You could try something like the following code (coding a refresh):
<div style="position:absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content:center">
<img id="myImage"
src="[YOUR_IMAGE_URL]"
style="height: 100%; width: 100%; object-fit: contain" />
</div><script>
const image = document.getElementById('myImage');
const baseUrl = "[YOUR_IMAGE_URL]";// Refresh every 10 seconds
setInterval(() => {
const timestamp = new Date().getTime();
image.src = `${baseUrl}?t=${timestamp}`;
}, 10000);
</script>
Hi Rafael,
The best ways I can think of, to achieve refreshed image is to save new images by new names, for example imageName_currentTimestamp.extension is a very common way of achieving this.
The other possibility I can propose is using base64 encoded image string as the html image source. I was already doing so by applying the custom operator to the provided image url, that was however created for the different use case, but seems like it could help you as well, and the difference could be that you would only need an ad hoc data source that would provide your component a desired string.
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 ?