DataviewJS Script to render a Markdown image in Reading View using a local field for the source
I often include an image URL for a note in my frontmatter or inline field. This allows me to render it using dataview
queries in other notes. This is handy, but sometimes I also want that image to be displayed on its note as well. I could easily just embedd the image as well as having it in a field, but this creates duplication, and is harder to maintain if the URL needs to be updated. This dataviewjs
script will read the URL from your supplied field and reder the image using that source. Additionally, there are some quality of life improvements as it also accepts size and alignment values.
- Install the
Dataview
plugin and enableJavaScript Queries
- copy the scripts/obsidian-image-from-field folder to your Obsidian vault (suggested to save it to a "./scripts" folder).
-
Use the following in your note where you want the image to be displayed:
`$= await dv.view("scripts/obsidian-image-from-field", ["<size>", "<alignment>", "<field>"])`
size
⇢ number (eg: 250, 300, 825, etc.)alignment
⇢left
,float-left
,float-left-with-margin
,center
,right
,float-right
,float-right-with-margin
field
⇢ name of field that holds the image source url (can be inline or frontmatter field)
note: live preview is not supported