urlencode image URLs

The images are path safe but not URL safe. Parametrized tests can include characters such as "\" or "?" in their name which can lead to 404 errors in the HTML summary report.

Author: ConorMacBride

pytest_mpl/summary/templates/basic.html

@@ -73,7 +73,7 @@ <h2>Image test comparison</h2>
             {%- endif %}
         </td>
         {% macro image(file) -%}
-        <td>{% if file %}<img src="{{ file }}">{% endif %}</td>
+        <td>{% if file %}<img src="{{ file | urlencode }}">{% endif %}</td>
         {%- endmacro -%}
         {{ image(result.baseline_image) }}
         {{ image(result.diff_image) }}

pytest_mpl/summary/templates/result.html

@@ -12,19 +12,19 @@
             <div class="hover-image">
                 {% if r.diff_image -%}
                 <div class="diff-image">
-                    <img src="{{ r.diff_image }}" class="card-img-top" alt="diff image">
+                    <img src="{{ r.diff_image | urlencode }}" class="card-img-top" alt="diff image">
                 </div>
                 <div class="result-image">
-                    <img src="{{ r.result_image }}" class="card-img-top" alt="result image">
+                    <img src="{{ r.result_image | urlencode }}" class="card-img-top" alt="result image">
                 </div>
                 {%- else -%}
-                <img src="{{ r.result_image }}" class="card-img-top" alt="result image">
+                <img src="{{ r.result_image | urlencode }}" class="card-img-top" alt="result image">
                 {%- endif %}
             </div>
             {%- elif r.result_image -%}
-            <img src="{{ r.result_image }}" class="card-img-top" alt="result image">
+            <img src="{{ r.result_image | urlencode }}" class="card-img-top" alt="result image">
             {%- elif r.baseline_image -%}
-            <img src="{{ r.baseline_image }}" class="card-img-top" alt="baseline image">
+            <img src="{{ r.baseline_image | urlencode }}" class="card-img-top" alt="baseline image">
             {%- endif %}
         </a>
         {% filter indent(width=8) -%}

pytest_mpl/summary/templates/result_images.html

@@ -13,7 +13,7 @@ <h5 class="card-title">{{ r.name }}</h5>
                 <div class="card h-100">
                     <div class="card-header">{{ name }}</div>
                     {% if file -%}
-                    <img src="{{ file }}" class="card-img-top" alt="{{ name }}">
+                    <img src="{{ file | urlencode }}" class="card-img-top" alt="{{ name }}">
                     {%- endif %}
                 </div>
             </div>