Add an image into a note type?

[DarcyM]

Hey everyone! So basically i am a very lazy person, and i also make a lot of anki cards for economics which involves drawing on them using a market axis. Is there anyway i can permanently embed an image like this into a note type? Thank you!!!

[AlexBocken]

It’s absolutely possible! I have done something similar together with a friend of mine for our Anki Deck about swiss mountains.

The basic idea is to store your picture in Anki2/User 1/media.collection/_yourpicture.fileextension

and then referencing it in your note type as in normal HTML:
<img src=_yourpicture.fileextension>

The underscore at the beginning of the file name is important iirc
Where exactly your Anki2 folder is is platform specific.

Edit: Or did I not quite understand your question correctly. Is it always the same image or differing ones?

[DarcyM]

Thank you so much!!! I’ll test this out right now thank you!!!

[AlexBocken]

You’re welcome. Let me know if it works.

You might need to add some styling like width=100% and similar to your img tag for Anki to reliably render the picture.

[DarcyM]

Yep that worked perfectly; thank you so much!!!

[picklerick]

Hey i tried that like you said but it didn´t work. When I learn those cards there is no image just the image icon even though i have stored the image in my media collection. Do you have any idea what I could have done wrong?

thank you

[kleinerpirat]

I see two problems here.

Invalid HTML

You forgot the opening quote for the src attribute.

Change

<img src=_testpicture.png">

to

<img src="_testpicture.png">

Wrong reference

In your HTML you reference _testpicture, but your file is called testpicture. Rename it to _testpicture.png to fix your issue.

[picklerick]

thank you so much it worked

[picklerick]

thank you so much and one last question. Do you know how I can manage it to get the image into the right position because now I got the image and directly after it comes the text but i want it to be on top of the text.

Here you see an example card with an example picture

[kleinerpirat]

This should do the trick:

<img src="_testpicture">

<div>{{cloze:Text}}</div>

If you want more space between the elements, you can do so with CSS in the styling section:

div {
  margin-top: 1em;
}