add force_reload method for images

nicegui/elements/image.js

@@ -12,6 +12,7 @@ export default {
   `,
   props: {
     src: String,
+    t: String,
   },
   data: function () {
     return {
@@ -26,7 +27,8 @@ export default {
   },
   methods: {
     compute_src() {
-      this.computed_src = (this.src.startsWith("/") ? window.path_prefix : "") + this.src;
+      const suffix = this.t ? (this.src.includes("?") ? "&" : "?") + "_nicegui_t=" + this.t : "";
+      this.computed_src = (this.src.startsWith("/") ? window.path_prefix : "") + this.src + suffix;
     },
   },
 };

nicegui/elements/image.py

@@ -1,3 +1,4 @@
+import time
 from pathlib import Path
 from typing import Union
 
@@ -15,3 +16,8 @@ class Image(SourceElement, component='image.js'):
         :param source: the source of the image; can be a URL, local file path or a base64 string
         """
         super().__init__(source=source)
+
+    def force_reload(self) -> None:
+        """Force the image to reload from the source."""
+        self._props['t'] = time.time()
+        self.update()

nicegui/elements/interactive_image.js

@@ -49,7 +49,8 @@ export default {
   },
   methods: {
     compute_src() {
-      const new_src = (this.src.startsWith("/") ? window.path_prefix : "") + this.src;
+      const suffix = this.t ? (this.src.includes("?") ? "&" : "?") + "_nicegui_t=" + this.t : "";
+      const new_src = (this.src.startsWith("/") ? window.path_prefix : "") + this.src + suffix;
       if (new_src == this.computed_src) {
         return;
       }
@@ -103,5 +104,6 @@ export default {
     content: String,
     events: Array,
     cross: Boolean,
+    t: String,
   },
 };

nicegui/elements/interactive_image.py

@@ -1,4 +1,5 @@
 from __future__ import annotations
+import time
 
 from pathlib import Path
 from typing import Any, Callable, List, Optional, Union, cast
@@ -55,3 +56,8 @@ class InteractiveImage(SourceElement, ContentElement, component='interactive_ima
             )
             handle_event(on_mouse, arguments)
         self.on('mouse', handle_mouse)
+
+    def force_reload(self) -> None:
+        """Force the image to reload from the source."""
+        self._props['t'] = time.time()
+        self.update()

website/more_documentation/image_documentation.py

@@ -38,3 +38,12 @@ def more() -> None:
     def link():
         with ui.link(target='https://github.com/zauberzeug/nicegui'):
             ui.image('https://picsum.photos/id/41/640/360').classes('w-64')
+
+    @text_demo('Force reload', '''
+        You can force an image to reload by calling the `force_reload` method.
+        It will append a timestamp to the image URL, which will make the browser reload the image.
+    ''')
+    def force_reload():
+        img = ui.image('https://picsum.photos/640/360').classes('w-64')
+
+        ui.button('Force reload', on_click=img.force_reload)

website/more_documentation/interactive_image_documentation.py

@@ -26,3 +26,12 @@ def more() -> None:
             ui.button(on_click=lambda: ui.notify('thumbs up'), icon='thumb_up') \
                 .props('flat fab color=white') \
                 .classes('absolute bottom-0 left-0 m-2')
+
+    @text_demo('Force reload', '''
+        You can force an image to reload by calling the `force_reload` method.
+        It will append a timestamp to the image URL, which will make the browser reload the image.
+    ''')
+    def force_reload():
+        img = ui.interactive_image('https://picsum.photos/640/360').classes('w-64')
+
+        ui.button('Force reload', on_click=img.force_reload)