HTML in Anki cards

Question

I'm want to display some image (.jpg) file from the local storage on each Anki card of particular note type. The code below shows the image on any browser:

<img src="file:///path/to/your/image.jpg" alt="Image alternate text" style="height:100px;width:100px">

Any attempts to load jpg file to Anki card do not produce any result. While using

<video width="620" height="640" controls="controls">
<source src="file:///Users/..../small.mp4" type="video/mp4">

I can access any mp4 file on my local drive and it's shown in the card as expected. Is the way to access image (.jpg/png) files from the local storage the same way? What is the trick in Anki cards? Now I need it only for the Anki desktop version.Thanks

Answer 1

Media files referenced in cards should be located within Anki's data folder. You shouldn't use absolute paths but only filenames within a "collection.media" folder in your Anki data folder.

In short you should:

• use <img src="XXX.jpg"> code in your cards (pay attention to avoid name collisions),
• import file having "Allow HTML in fields" checked,
• put XXX.jpg in Anki's "collection.media" (under Anki in your user's documents folder)

See https://apps.ankiweb.net/docs/manual.html#_importing_media for further details.