Display images from URL

Anki Help
1

Example: I have this direct link to an image, how can I use it to display this image on Anki?

I will be exporting cards with images from a CSV file. So there are a lot of links like those.

2

You could do that using the HTML editor of Anki.

3

The end result should always be the following:

url-to-image → <img src="url-to-image">

There’s several ways to approach this:

  1. Edit the CSV before import (easiest)
  2. Use Find & Replace within Anki
  3. Convert them with JavaScript in your card template (not recommended).

CSV

If your CSV has the image URLs in a separate column, you can just add a column before with <img src=" and one after with ">.

Find & Replace

You could use RegEx to wrap your URLs with the image tag. Before I get into the details, I would need to know how exactly your URLs are represented in your CSV. Are they just plain text like this: url-to-image, or wrapped in an <a href="url-to-image"> tag? In the latter case, it’s as simple as replacing the <a> with <img>.

However, it would also be important that any URL is an image URL, not something else OR that they have a very distinct pattern we could use to discern them.

JavaScript

You could dynamically wrap your URLs with image tags. It’s not recommended, because you wouldn’t see the images in the editor.

4 Likes