#642 fix content rendering for interactive image without cross

nicegui/elements/interactive_image.js

@@ -2,8 +2,8 @@ export default {
   template: `
     <div style="position:relative">
       <img :src="src" style="width:100%; height:100%;" v-on="onEvents" draggable="false" />
-      <svg v-if="cross" style="position:absolute;top:0;left:0;pointer-events:none" :viewBox="viewBox">
-        <g :style="{ display: cssDisplay }">
+      <svg style="position:absolute;top:0;left:0;pointer-events:none" :viewBox="viewBox">
+        <g v-if="cross" :style="{ display: cssDisplay }">
           <line :x1="x" y1="0" :x2="x" y2="100%" stroke="black" />
           <line x1="0" :y1="y" x2="100%" :y2="y" stroke="black" />
         </g>

tests/test_interactive_image.py

@@ -1,3 +1,5 @@
+import pytest
+
 from nicegui import Client, ui
 
 from .screen import Screen
@@ -26,3 +28,15 @@ def test_set_source_in_tab(screen: Screen):
     screen.wait(0.5)
     screen.click('A')
     assert screen.find_by_tag('img').get_attribute('src') == 'https://nicegui.io/logo.png'
+
+
+@pytest.mark.parametrize('cross, number_of_lines', [(True, 2), (False, 0)])
+def test_with_cross(screen: Screen, cross: bool, number_of_lines: int):
+    ii = ui.interactive_image('https://nicegui.io/logo.png', cross=cross)
+    ii.content = f'<circle cx="100" cy="100" r="15" fill="none" stroke="red" stroke-width="4" />'
+
+    screen.open('/')
+    screen.find_by_tag('svg')
+    with screen.implicitly_wait(0.5):
+        assert len(screen.find_all_by_tag('line')) == number_of_lines
+        assert len(screen.find_all_by_tag('circle')) == 1