Loading Local Resources
User Assets
It is possible to load local assets from the file system using the file:// URL scheme. This makes it possible to display images in a user's directory or visualize other assets that are don't lend themselves well to the terminal's text based formatting.
The following example displays all
.pngfiles in on our Desktop.
<html>
<script>
fig.init = (input) => {
preview()
}
let preview = () => {
fig.execute('ls -1', (out) => {
let files = out.split('\n')
let pngs = files.filter(p => p.endsWith(".png"))
console.log(pngs)
let thumbnails = pngs.map(p => { return `<img draggable = "true" src = "file://${fig.env.HOME}/Desktop/${p}"></img>`}).join("")
console.log(thumbnails)
document.getElementById("view").innerHTML = thumbnails
console.log(document.body.innerHTML)
})
}
</script>
<style>
img {
height: 50px;
width: 50px;
object-fit: cover;
}
</style>
<body>
<div id = "view">
</div>
</body>
</html>
Using the fig:// URL scheme, you can load native assets for file icons and processes. There are a few different types of assets that can accessed this way.
Icons from File Path
Prefixing a file path with fig:// creates a reference to the native icon for that file, just like what would be displayed in Finder.
<img src = "fig:///Users/user/folder/file.ext">
Icons by Type
You might also want to get an icon for a file type, rather than by path. This is often used when displaying icons for files on a remote machine.
fig://icon?type=png
Icons for PID
To display icons for running processes, use the icon path with the pid as a query parameter.
fig://icon?pid=2834
Sizing Assets
For any fig:// URL, you can specify the size of the asset using query parameters. (The default size is 32px by 32px.)
fig://path/to/file?w=64&h=64
Last updated