Displaying images in the autograder output

[priyankamandikal]

I am trying to display images in the test case outputs in the autograder using markdown.
My results.json contains a test case as follows:

{
            "name": "Graphs: n1",
            "number": "3.3.2",
            "score": 0,
            "output_format": "md",
            "output": "![n1](cf/gen/n1/compare.png) ![n1](cf/gen/n1/compare.ndcg.png)"
        }

However, no images are being displayed. I just see something like the following:

The images I am trying to display are within /autograder/results and the image path I specify is relative to the results directory. I have tried absolute path as well and get the same output. What is the issue? Does Gradescope support displaying images within the autograder outputs?

[jacobrast]

Solved using this method for embedding image data into html

https://jsfiddle.net/MH7gF/

[anyaevostinar]

Could you expand on what worked for you? Using output_format as html instead and then just tag works?

[ibrahima]

I think the trick is to embed the image data as base64 in the tag as shown in that example. Files created by the autograder (probably[1]) aren't uploaded to Gradescope so you can't reference them.

Here's another reference for base64 encoding images: https://sentry.io/answers/how-do-i-display-a-base64-image-in-html/. On Linux you can use the base64 command to do it: https://stackoverflow.com/a/32895908.

[1] I no longer work for Gradescope but that was the case when I was there.

[jacobrast]

To add on to @ibrahima : Files created by the autograder are indeed not uploaded to Gradescope (afaik). However, the HTML will be uploaded. So if we embed the image data into an HTML file we can have images created by an Autograder uploaded to Gradescope and displayed.

[wrongu]

Embedding images with base64 (as in the accepted answer above) is something that I added to my own fork of the gradescope-utils python testing library in case anyone comes here looking for a tool like this.