render: add html path to generate_html and partial_html

Fixes: iterative/dvc#7812

src/dvc_render/base.py

@@ -27,7 +27,7 @@ def __init__(
         self.properties = properties
 
     @abc.abstractmethod
-    def partial_html(self) -> str:
+    def partial_html(self, **kwargs) -> str:
         """
         Us this method to generate HTML content,
         to fill `{partial}` inside self.DIV.
@@ -51,9 +51,9 @@ def remove_special_chars(string: str) -> str:
             {ord(c): "_" for c in r"!@#$%^&*()[]{};,<>?\/:.|`~=_+"}
         )
 
-    def generate_html(self) -> str:
+    def generate_html(self, html_path=None) -> str:
         "Return `DIV` formatted with `partial_html`."
-        partial = self.partial_html()
+        partial = self.partial_html(html_path=html_path)
         if partial:
 
             div_id = self.remove_special_chars(self.name)

src/dvc_render/html.py

@@ -109,7 +109,7 @@ def render_html(
 
     for renderer in renderers:
         document.with_scripts(renderer.SCRIPTS)
-        document.with_element(renderer.generate_html())
+        document.with_element(renderer.generate_html(html_path=output_path))
 
     output_path.write_text(document.embed(), encoding="utf8")
 

src/dvc_render/image.py

@@ -1,3 +1,5 @@
+import os
+
 from .base import Renderer
 
 
@@ -20,17 +22,26 @@ class ImageRenderer(Renderer):
 
     EXTENSIONS = {".jpg", ".jpeg", ".gif", ".png"}
 
-    def partial_html(self) -> str:
+    def partial_html(self, html_path=None, **kwargs) -> str:
         div_content = []
         for datapoint in self.datapoints:
+            src = datapoint[self.SRC_FIELD]
+
+            if (
+                not src.startswith("data:image;base64")
+                and os.path.isabs(src)
+                and html_path
+            ):
+                src = os.path.relpath(src, os.path.dirname(html_path))
+
             div_content.append(
                 f"""
                 <div
                     style="border:1px dotted black;margin:2px;display:
                     inline-block;
                     overflow:hidden;margin-left:8px;">
                     <p>{datapoint[self.TITLE_FIELD]}</p>
-                    <img src="{datapoint[self.SRC_FIELD]}">
+                    <img src="{src}">
                 </div>
                 """
             )

src/dvc_render/plotly.py

@@ -42,7 +42,7 @@ def __init__(
         self.name = name
         self.fill_value = fill_value
 
-    def partial_html(self) -> str:
+    def partial_html(self, **kwargs) -> str:
         return json.dumps(self._get_plotly_data())
 
     def _get_plotly_data(self):

src/dvc_render/vega.py

@@ -83,5 +83,5 @@ def get_filled_template(
 
         return content
 
-    def partial_html(self) -> str:
+    def partial_html(self, **kwargs) -> str:
         return self.get_filled_template()

tests/test_image.py

@@ -1,3 +1,5 @@
+import os
+
 import pytest
 
 from dvc_render.image import ImageRenderer
@@ -23,21 +25,60 @@ def test_matches(extension, matches):
     assert ImageRenderer.matches(filename, {}) == matches
 
 
-def test_render(tmp_dir):
-    tmp_dir.gen("workspace_file.jpg", b"content")
+@pytest.mark.parametrize("html_path", [None, "/output/dir/index.html"])
+@pytest.mark.parametrize(
+    "src", ["relpath.jpg", "data:image;base64,encoded_image"]
+)
+def test_render(html_path, src):
+    datapoints = [
+        {
+            "filename": "file.jpg",
+            "rev": "workspace",
+            "src": src,
+        }
+    ]
+
+    html = ImageRenderer(datapoints, "file.jpg").generate_html(
+        html_path=html_path
+    )
+
+    assert "<p>file.jpg</p>" in html
+    assert f'<img src="{src}">' in html
+
+
+@pytest.mark.parametrize(
+    "html_path,img_path,expected_path",
+    [
+        (
+            os.path.join("output", "path", "index.html"),
+            os.path.join("output", "path", "with", "static", "file.jpg"),
+            os.path.join("with", "static", "file.jpg"),
+        ),
+        (
+            os.path.join("output", "one", "path", "index.html"),
+            os.path.join("output", "second", "path", "file.jpg"),
+            os.path.join("..", "..", "second", "path", "file.jpg"),
+        ),
+    ],
+)
+def test_render_evaluate_path(tmp_dir, html_path, img_path, expected_path):
+    abs_html_path = tmp_dir / html_path
+    abs_img_path = tmp_dir / img_path
+
     datapoints = [
         {
             "filename": "file.jpg",
             "rev": "workspace",
-            "src": "workspace_file.jpg",
+            "src": str(abs_img_path),
         }
     ]
-    filename = "file.jpg"
 
-    html = ImageRenderer(datapoints, filename).generate_html()
+    html = ImageRenderer(datapoints, "file.jpg").generate_html(
+        html_path=abs_html_path
+    )
 
     assert "<p>file.jpg</p>" in html
-    assert '<img src="workspace_file.jpg">' in html
+    assert f'<img src="{expected_path}">' in html
 
 
 def test_render_empty():