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,
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>